?效果
文章來源：http://www.zghlxwxcb.cn/news/detail-741248.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-741248.html
代碼
wxml
<!-- 彈窗信息 -->
<view class="popup-container" wx:if="{{showPopup}}">
<view class="popup-content">
<!-- 彈窗內(nèi)容 -->
<text>這是一個右側(cè)彈窗</text>
</view>
</view>
<!-- 遮罩層 -->
<view class="popup-mask" wx:if="{{showPopup}}" bindtap="hidePopup"></view>
<!-- 點擊出現(xiàn)彈窗的按鈕 -->
<button bindtap="showPopup">顯示彈窗</button>wxss
.popup-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 90%;
background-color: #fff;
z-index: 9999;
border-bottom-left-radius: 15rpx;
border-top-left-radius: 15rpx;
}
.popup-content {
padding: 20rpx;
}
.popup-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}js
Page({
data: {
showPopup: false
},
showPopup: function () {
this.setData({
showPopup: true
});
},
hidePopup: function () {
this.setData({
showPopup: false
});
}
});到了這里，關(guān)于微信小程序：點擊按鈕出現(xiàn)右側(cè)彈窗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
