兴国资源网 Design By www.nnzcdc.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.nnzcdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
兴国资源网 Design By www.nnzcdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]