如何使用uniapp在小程序中通过滑动页面来控制元素显示与隐藏？

本文共计623个文字，预计阅读时间需要3分钟。

前言：实现思路通过小程序API中的触摸事件，配合CSS，实现元素的显示和隐藏。

实现步骤：

1.使用小程序的触摸事件API，监听元素的触摸事件。

2.根据触摸事件的结果，动态修改元素的CSS样式，实现显示或隐藏。

PS（也想通过监听页面滚动的形式来实现，但效果可能与触摸事件相差0.0）：一、需要用到的事件touch。

具体实现如下：

1.在页面的wxml文件中定义需要显示或隐藏的元素。

2.在页面的js文件中，使用`touchstart`和`touchend`事件监听元素的触摸操作。

3.在事件处理函数中，根据触摸操作的结果，动态修改元素的`display`属性，实现显示或隐藏。

4.使用CSS控制元素的显示和隐藏效果。

前言

实现思路：通过小程序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开发小程序实现滑动页面控制元素的显示和隐藏效果的文章就介绍到这了,更多相关小程序滑动页面显示和隐藏内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！