微信小程序原生自定義彈窗效果
更新時間：2022年07月06日 09:45:03 作者：cwj?thin
這篇文章主要為大家詳細(xì)介紹了微信小程序原生自定義彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
背景
微信小程序原生的在彈出層wx.showModal中可以通過配置項(xiàng)editable配置輸入框，但是對于微信的版本有限制，微信版本過低無法顯示，所以需要實(shí)現(xiàn)彈出層的效果
如下圖
代碼
index.wxml
<!-- 遮罩層 -->
? <view wx:if="{{isShow}}" class='cover'>
? ? <!-- 可在此按需求自定義遮罩 -->
? ? <view style="position: relative;">
? ? ? <view class='cover_child'>
? ? ? ? <text class="child-title">請輸入距離（km）</text>
? ? ? ? <input class="weui-input" type="number" bindinput="bindKeyInput" placeholder="請輸入1-80之間的整數(shù)" />
? ? ? </view>
? ? ? <view class='btn-group'>
? ? ? ? <view catchtap="hideCover">取消</view>
? ? ? ? <view style="color: #5A6B8F;">確認(rèn)</view></view>
? ? </view>
</view>index.js
Page({
? data: {
? ? inputDisValue:'',
? ? }
? ? })
? ? //實(shí)時獲取到輸入的值
? bindKeyInput(e) {
? ? console.log(e.detail.value)
? ? this.setData({
? ? ? inputDisValue: e.detail.value
? ? })
? },
? hideCover(){
? ? this.setData({
? ? ? isShow: false
? ? })
? },
? showCover(){
? ? this.setData({
? ? ? isShow:true
? ? })
? },index.wxss
.bg {
? position: fixed;
? top: 0;
? left: 0;
? width: 100%;
? height: 100%;
? background: rgba(0, 0, 0, 0.5);
? padding: 0 20rpx;
}
.btn-group {
? position: absolute;
? left: 0;
? bottom: 0;
? width: 100%;
? display: flex;
? justify-content: space-around;
? font-weight: bold;
? padding: 20rpx 0;
}
.weui-input {
? background-color: #f1f1f1;
? border-radius: 10rpx;
? width: 400rpx;
? padding: 16rpx 16rpx;
}
.cover {
? width: 100%;
? height: 100%;
? position: fixed;
? top: 0;
? left: 0;
? display: flex;
? justify-content: center;
? align-items: center;
? z-index: 999;
}
.cover_child {
? width: 550rpx;
? height: 300rpx;
? background: rgba(255, 255, 255, 1);
? border-radius: 20rpx;
? display: flex;
? flex-direction: column;
? align-items: center;
? z-index: 5;
}
.child-title {
? white-space: nowrap;
? margin-top: 60rpx;
? height: 32rpx;
? font-size: 34rpx;
? font-weight: bold;
? color: #333333;
? line-height: 36rpx;
? margin-bottom: 31rpx;
}
.cross {
? margin-bottom: 110rpx;
? bottom: 0rpx;
? position: fixed;
? width: 60rpx;
? height: 60rpx;
? z-index: 5;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近在做一個小程序的項(xiàng)目,所以記錄下開發(fā)過程中遇到的坑,這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)之你可能沒有踩過的神坑,需要的朋友可以參考下2021-09-09
這篇文章介紹了JS獲取地址欄參數(shù)的小例子，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了PHP PDO操作總結(jié),本文講解了使用PDO連接數(shù)據(jù)庫、執(zhí)行基本查詢、獲取行數(shù)、遍歷結(jié)果集、轉(zhuǎn)義用戶輸入的特殊字符、exec()、預(yù)處理語句等內(nèi)容,需要的朋友可以參考下2014-11-11
實(shí)現(xiàn)NodeJS與Mysql的交互首先把Mysql Module裝到NodeJS中，具體實(shí)現(xiàn)及結(jié)果截圖如下，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-08
JS設(shè)計(jì)模式之狀態(tài)模式概念與用法分析
這篇文章主要介紹了JS設(shè)計(jì)模式之狀態(tài)模式概念與用法,簡單講述了狀態(tài)模式的概念、功能、應(yīng)用場景并結(jié)合javascript實(shí)例形式分析了狀態(tài)模式的簡單定義及使用方法,需要的朋友可以參考下2018-02-02
本文主要介紹了js仿微博動態(tài)欄功能的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
說到vant框架相信大家應(yīng)該并不陌生了吧,做過移動端開發(fā)的小伙伴們應(yīng)該都知道它吧,下面這篇文章主要給大家介紹了關(guān)于微信小程序中使用vant組件庫的超詳細(xì)圖文教程,需要的朋友可以參考下2023-03-03
Echarts.js實(shí)現(xiàn)水滴球和海洋效果
這篇文章介紹了Echarts.js實(shí)現(xiàn)水滴球和海洋效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
JS實(shí)現(xiàn)的集合去重，交集，并集，差集功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的集合去重，交集，并集，差集功能,結(jié)合實(shí)例形式分析了javascript基于數(shù)組實(shí)現(xiàn)的集合去重、交集、并集、差集等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03
五段實(shí)用的js高級技巧，一些不錯的小技巧，學(xué)習(xí)js的朋友可以看看。2011-12-12