如何用uniapp开发小程序实现滑动页面控制长尾词相关元素显示与改写？

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

前言：实现思路通过小程序API中的触摸事件，配合CSS来实现元素的显示和隐藏。ps（也想通过监听页面滚动的方式来实现，不过效果一定要非常接近0.0）。

一、需要用到的事件：touchstart、touchmove、touchend

javascript

Page({ data: { show: true // 控制元素显示和隐藏 }, // 触摸开始 touchStart: function(e) { this.setData({ show: false // 触摸开始时隐藏元素 }); }, // 触摸移动 touchMove: function(e) { // 在这里可以添加移动时的逻辑 }, // 触摸结束 touchEnd: function(e) { this.setData({ show: true // 触摸结束时显示元素 }); }});

前言

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