微信小程式自定義彈窗/彈出層功能,非官方api,自寫
阿新 • • 發佈:2019-02-13
index.wxml
<!--index.wxml--> <!-- 遮罩層 --> <view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <!-- 彈出層 --> <view class="modalDlg" wx:if="{{showModal}}"> <!-- 二維碼或其他圖片 --> <image src="../images/gzhewm.png"/> <text class="text">這裡是文字描述,可以檢視css修改樣式</text> <view bindtap="ok" class="ok">好的</view> </view> <view bindtap="btn" class="btn">彈窗</view>
index.wxss
/**index.wxss**/ /* 外面的按鈕 */ .btn{ width: 80px; height: 35px; background: #44b549; line-height: 35px; text-align: center; color: #fff; font-size: 15px; margin:20px auto; border-radius: 100px; } /* 遮罩層 */ .mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; z-index: 9000; opacity: 0.5; } /* 彈出層 */ .modalDlg{ width: 70%; position: fixed; top: 50px; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius:5px; display: flex; flex-direction: column; align-items: center; } /* 彈出層裡面的圖片 */ .modalDlg image{ width: 120px; height: 120px; margin-top: 30px; } /* 彈出層裡面的按鈕 */ .ok{ width: 80px; height: 35px; background: #44b549; line-height: 35px; text-align: center; color: #fff; font-size: 15px; margin:20px auto; border-radius: 100px; } /* 彈出層裡面的文字 */ .text{ text-align: justify; font-size: 14px; color: #666; width: 180px; margin-top: 10px; }
index.js
Page({
data: {
showModal: false
},
// 外面的彈窗
btn: function () {
this.setData({
showModal: true
})
},
// 禁止螢幕滾動
preventTouchMove: function () {
},
// 彈出層裡面的彈窗
ok: function () {
this.setData({
showModal: false
})
}
})
TANKING
2018-10-7
http://likeyunba.com