圆月山庄资源网 Design By www.vgjia.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.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年06月14日
2024年06月14日
- 群星-《男人40走过的岁月》SRS环绕音效2cd[WAV+CUE]
- 手游《DC:黑暗军团》公布官方预告 狂笑蝙vs正联!
- 《街头霸王6》“维加”实机演示 6月26日正式上线
- 你抢到了吗?《黑神话:悟空》实体版秒售罄!
- 群星.2001-1哥·滚石2000年国台语双赢总霸主【滚石】【WAV+CUE】
- 群星.2001-1姐·滚石2000年国台语双贏总霸主【滚石】【WAV+CUE】
- 群星.2001-1哥1姐·滚石2000年国台语双赢总霸主【滚石】【WAV+CUE】
- 林子祥《典藏版》DSD+SBM版[WAV+CUE][600MB]
- 林忆莲《忆情思莲》DSD+SBM版[WAV+CUE][600MB]
- 许嵩《许嵩歌曲合集》[FLAC/分轨][3.5G]
- 世界启元古埃及文明怎么样 古埃及文明选择推荐
- 世界启元穆兰怎么样 世界启元英雄穆兰介绍
- 世界启元尤里乌斯组队阵容大全 尤里乌斯配队推荐
- 群星-《女人40走过的岁月》SRS环绕音效2CD[WAV+CUE]
- 阿杜2005《IDo》[WAV+CUE]