微信小程序雖然有三種自帶的彈窗，但是畢竟功能有限，有時候難以滿足我們的需求，所以我們可以自己嘗試制作自定義彈窗，話不多說，直接上圖：
其中列表部分支持滾動，所以信息承載能力很強。
實現代碼：
wxml:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
.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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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里面的內容可以動態獲取
到此這篇關于微信小程序學習之自定義滾動彈窗的文章就介紹到這了,更多相關微信小程序自定義滾動彈窗內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/botellei/article/details/111403325
