uniapp开发小程序实现滑动页面，控制元素的显示和隐藏

---

前言

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

---

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

二、话不多说上代码

1.看需求，如果是整个屏幕滑动后元素发生变化，最好放在最外面的view

代码如下：

<view class="container" @touchmove="handletouchstart" @touchend="handletouchend">
  <view class="column popupfx" :class="specClass">我是要发生变化的元素</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>

---

总结

以上就是滑动页面之后对元素显示和隐藏动画的实现，本人学艺不精，想跟大家分享一下，欢迎高手指导。