溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“小程序怎么自定義下拉動畫”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“小程序怎么自定義下拉動畫”文章吧。
小程序中可以自定義設置實現下拉菜單帶動畫，下面是實現這種形式的方法：
在pick-header里添加篩選項，在pick-container添加被篩選的選項內容，content里顯示真正的內容。
content的高度是會在js里根據當前手機分辨率所動態計算的，高度值為contentHeight，所以在里面可以嵌套一個scroll-view，設置高度為contentHeight即可實現內容滑動。
下拉菜單示例.gif
wxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <view class="content-container"> <view class="pick-header" bindtap="onPickHeaderClick"> 篩選pick-header view z-index:60 </view> <view class="pick-container {{needAnimation ? (openPicker ? 'slidown' : 'slidup') : ''}}" > 篩選項 pick-container view z-index:50 </view> <view class="shadow" style="height:{{contentHeight}}px;line-height:{{contentHeight}}px" hidden=" {{!openPicker}}">我是半透明陰影遮罩 view shadow z-index:40</view> <view class="content" style="height:{{contentHeight}}px"> 我是內容content view z-index:20 </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 | /*根布局*/.content-container {width: 100%;position: absolute;}/*篩選頭部*/.pick-header { width: 100%; height: 72rpx; z-index: 60; position: fixed; background-color: lightcoral;}/*篩選項容器布局*/.pick-container { width: 100%; height: 300rpx; background-color: lightgoldenrodyellow; position: absolute; z-index: 50; top: -228rpx;}/*篩選項隱藏 顯示動畫 start*/@keyframes slidown { from { transform: translateY(0%); } to { transform: translateY(100%); }}.slidown { display: block; animation: slidown 0.1s ease-in both;}@keyframes slidup { from { transform: translateY(100%); } to { transform: translateY(0%); }}.slidup { display: block; animation: slidup 0.2s ease-in both;}/*篩選項隱藏 顯示動畫 end*//*篩選項顯示出來的時候的陰影*/.shadow { width: 100%; background-color: rgba(1, 1, 1, 0.2); position: absolute; z-index: 40; top: 72rpx;}/*內容容器布局*/.content { width: 100%; position: absolute; top: 72rpx; z-index: 20;} |
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 | Page({data: { openPicker: false, needAnimation : false, contentHeight: 0},onLoad: function () {},onReady: function () { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ //動態根據手機分辨率來計算內容的高度（屏幕總高度-頂部篩選欄的高度） contentHeight: (res.windowHeight - 72 * res.screenWidth / 750) }); } })},onPickHeaderClick: function () { this.setData({ openPicker: !this.data.openPicker, needAnimation : true }) },}) |
以上就是關于“小程序怎么自定義下拉動畫”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
