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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。