前言
實現(xiàn)思路：通過小程序API中的觸摸事件，配合CSS來實現(xiàn)元素的顯示和隱藏。ps（也想過另一種通過監(jiān)聽頁面滾動的方式來實現(xiàn)，不過效果一定很差0.0）
一、需要用到的事件touchmove、touchend
二、話不多說上代碼
1.看需求，如果是整個屏幕滑動后元素發(fā)生變化，最好放在最外面的view
代碼如下：
|
1
2
3
|
<view class="container" @touchmove="handletouchstart" @touchend="handletouchend"> <view class="column popupfx" :class="specClass" @click="createHaibao">我是要發(fā)生變化的元素</view></view> |
JS代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
data() { return { specClass: 'hide', }; },methods:{ handletouchstart() { this.specClass = 'show'; }, handletouchend() { this.specClass = 'hide'; },} |
CSS代碼如下：
|
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
|
<style lang="scss"> .popupfx { position: fixed; top: 80%; right: 20upx; z-index: 10; &.show { animation: showLayer 0.2s linear both; } &.hide { animation: hideLayer 0.2s linear both; } @keyframes showLayer { 0% { transform: translateX(0%); } 100% { transform: translateX(80upx); //這里可以通過變大變小調(diào)整偏移量 } } @keyframes hideLayer { 0% { transform: translateX(80upx); } 100% { transform: translateX(0); } } }</style> |
總結(jié) 以上就是滑動頁面之后對元素顯示和隱藏動畫的實現(xiàn)，本人學藝不精，想跟大家分享一下，歡迎高手指導。
到此這篇關(guān)于uniapp開發(fā)小程序?qū)崿F(xiàn)滑動頁面控制元素的顯示和隱藏效果的文章就介紹到這了,更多相關(guān)小程序滑動頁面顯示和隱藏內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_41586715/article/details/110927302
