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

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

前言：实现思路通过小程式API中的触摸事件，配合CSS，实现元素的显示和隐藏。PS（也想通过监听页面滚动的的方式来实现，但效果可能与期望相差0.0）。

一、所需事件：触摸事件（touch）

1. HTML结构：元素内容

2. CSS样式：css#element { transition: opacity 0.5s ease; opacity: 0;}

3. JavaScript代码：javascriptdocument.getElementById('element').addEventListener('touchstart', function() { this.style.display='block'; this.style.opacity=1;});

二、监听页面滚动的方式实现（可选）

1. HTML结构：元素内容

2. CSS样式：css#element { transition: opacity 0.5s ease; opacity: 0;}

3. JavaScript代码：javascriptwindow.addEventListener('scroll', function() { var element=document.getElementById('element'); var scrollTop=window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > 100) { // 假设滚动超过100px显示元素 element.style.display='block'; element.style.opacity=1; } else { element.style.display='none'; element.style.opacity=0; }});

注意：此方法的效果可能与期望相差0.0，具体效果取决于浏览器和设备的实现。

前言

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