富贵资源网 Design By www.hznty.com
微信小程序虽然有三种自带的弹窗，但是毕竟功能有限，有时候难以满足我们的需求，所以我们可以自己尝试制作自定义弹窗，话不多说，直接上图：
其中列表部分支持滚动，所以信息承载能力很强。
实现代码：
wxml:
<button class="showModal" bindtap="showModal_click">唤出弹窗</button>
<!--弹窗-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
<view class="modal-title">标题</view>
<view class="modal-title-sc">副标题</view>
<view class="modal-content">
<scroll-view scroll-y="true" style="height:100px;">
<block wx:for="{{data}}" wx:key="id">
<button class="info">
<view class="name_List">{{item.name}}</view>
<view class="quantity_List">×{{item.quantity}}</view>
<view class="reason_List">{{item.message}}</view>
</button>
</block>
</scroll-view>
</view>
<view class="modal-content-return">
此处可随意添加文本内容
</view>
<view class="modal-footer">
<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
</view>
</view>
wxss:
.showModal{
position:absolute;
height:50px;
left:30%;
width:40%;
top:40%;
background: rgb(95, 228, 83);
color:#fff;
font-size: 20px;
}
/*以下全是弹窗样式*/
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modal-dialog {
width: 80%;
overflow: hidden;
position: fixed;
top: 40%;
left: 0;
z-index: 9999;
background: #f9f9f9;
margin-top: -180rpx;
margin-left: 10%;
border-radius: 36rpx;
}
.modal-title {
padding-top: 30rpx;
font-size: 20px;
color: #030303;
text-align: center;
}
.modal-title-sc {
padding-top: 10rpx;
font-size: 15px;
color: #bebcbc;
text-align: center;
}
.modal-content {
padding: 10rpx 32rpx;
}
.info{
height:30px;
left:0%;
text-align: left;
font-size: 12px;
color:#bebcbc;
}
.info::after{
border: 0px;
}
.name_List{
position:absolute;
left:0%;
width:40%;
text-align: left;
}
.quantity_List{
position:absolute;
left:40%;
width:10%;
text-align: left;
}
.reason_List{
position:absolute;
left:50%;
width:50%;
text-align: right;
overflow: hidden;
}
.modal-content-return{
padding: 15rpx 32rpx;
font-size: 15px;
color: #bebcbc;
}
.modal-footer {
display: flex;
flex-direction: row;
height: 86rpx;
border-top: 1px solid #dedede;
font-size: 34rpx;
line-height: 86rpx;
}
.btn-cancel {
width: 50%;
color: #666;
text-align: center;
border-right: 1px solid #dedede;
}
.btn-confirm {
width: 50%;
color: #ec5300;
text-align: center;
}
js:
Page({
data: {
data:null,
showModal:false
},
onLoad: function () {
var data=[
{id:1,name:"cc",quantity:2,message:"爱玩游戏"},
{id:2,name:"ha",quantity:4,message:"爱谈恋爱"},
{id:3,name:"lxl",quantity:6,message:"爱看电视"},
{id:4,name:"cc",quantity:2,message:"爱玩游戏"},
{id:5,name:"ha",quantity:4,message:"爱谈恋爱"},
{id:6,name:"lxl",quantity:6,message:"爱看电视"},
]
this.setData({
data:data
})
},
showModal_click:function(){
this.setData({
showModal:true
})
},
//弹窗事件
hideModal: function () {
this.setData({
showModal: false
});
},
onCancel: function () {
this.hideModal();
},
onConfirm: function () {
this.hideModal();
}
})
直接拿过去就可以用，data里面的内容可以动态获取
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。