微信小程序自定义对话框dialog
简介
和用户交互,提示用户,让用户选择
界面:
第一个图片代码
wxml
<button bindtap="bt1" class="button">对话框1</button>
<modal hidden="{{!hiddenmodal}}" title="扫描结果" bindconfirm="modalCancle" no-cancel="false" confirmText="取消">
<view class="modal">
<image class="image" src="../images/38.png"></image>
<text class="text">文字1</text>
</view>
</modal>
js
data: {
hiddenmodal: false,
},
//对话框1按钮
bt1: function(e) {
let that = this
that.setData({
hiddenmodal: true,
})
},
//取消1
modalCancle: function (e) {
let that = this
that.setData({
hiddenmodal: false,
})
},
wxss
.modal{
display: flex;
align-items: center;
justify-content: center;
}
.button{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.image{
width: 80rpx;
height: 80rpx
}
.text{
margin-left: 30rpx;
}
第二个图片代码
wxml
<button bindtap="bt2" class="button">对话框2</button>
<action-sheet hidden="{{!hidden_actionSheet}}" bindchange="actionSheetChange">
<action-sheet-item class='item'>
<image class="image" src="../images/38.png"></image>
<text class="text">文字1</text>
</action-sheet-item>
<action-sheet-item class='item'>
<image class="image" src="../images/38.png"></image>
<text class="text">文字2</text>
</action-sheet-item>
<!-- 取消按钮可以不用 -->
<action-sheet-cancel class='cancel' >取消</action-sheet-cancel>
</action-sheet>
js
data: {
hidden_actionSheet: false,
},
//对话框2按钮
bt2: function(e) {
let that = this
that.setData({
hidden_actionSheet: true,
})
},
// 底下的取消
actionSheetChange: function (e) {
this.setData({
hidden_actionSheet: false
})
},
wxss
.button{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.image{
width: 80rpx;
height: 80rpx
}
.text{
margin-left: 30rpx;
}
.item{
display: flex;
align-items: center;
justify-content: center;
}
第三张图片(wifi列表)
需要wifi列表的可以看链接: