小程序开发设计如何实现跨平台开发与管理满足企业多元化需求
1104
2023-11-14
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
前言
实现思路：通过小程序API中的触摸事件，配合CSS来实现元素的显示和隐藏。ps（也想过另一种通过监听页面滚动的方式来实现，不过效果一定很差0.0）
一、需要用到的事件touchmove、touchend
二、话不多说上代码
1.看需求，如果是整个屏幕滑动后元素发生变化，最好放在最外面的view
代码如下：
?
1
2
3
<view class="container" @touchmove="handletouchstart" @touchend="handletouchend">
<view class="column popupfx" :class="specClass" @click="createHaibao">我是要发生变化的元素</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代码如下：
总结 以上就是滑动页面之后对元素显示和隐藏动画的实现，本人学艺不精，想跟大家分享一下，欢迎高手指导。
到此这篇关于uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果的文章就介绍到这了,更多相关小程序滑动页面显
您可能感兴趣的文章:uniapp使用scroll-view实现左右上下滑动功能uniapp小视频项目开发之滑动播放视频uniapp实现可以左右滑动导航栏uniapp实现可滑动选项卡uniapp组件之tab选项卡滑动切换功能实现
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~