uniapp开发小程序实现滑动页面控制元素的显示和
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前言
实现思路：通过小程序API中的触摸事件，配合CSS来实现元素的显示和隐藏。ps（也想过另一种通过监听页面滚动的方式来实现，不过效果一定很差0.0）
一、需要用到的事件touchmove、touchend
二、话不多说上代码
1.看需求，如果是整个屏幕滑动后元素发生变化，最好放在最外面的view
代码如下：
<view class="container" @touchmove="handletouchstart" @touchend="handletouchend"> <view class="column popupfx" :class="specClass" @click="createHaibao">我是要发生变化的元素</view> </view>
JS代码如下：
data() {
return {
specClass: 'hide',
};
},
methods:{
handletouchstart() {
this.specClass = 'show';
},
handletouchend() {
this.specClass = 'hide';
},}
CSS代码如下：
<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); //这里可以通过变大变小调整偏移量
}
}
@keyframes hideLayer {
0% {
transform: translateX(80upx);
}
100% {
transform: translateX(0);
}
}
}
</style>
总结 以上就是滑动页面之后对元素显示和隐藏动画的实现，本人学艺不精，想跟大家分享一下，欢迎高手指导。
到此这篇关于uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果的文章就介绍到这了,更多相关小程序滑动页面显示和隐藏内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！