前言

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

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

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

二、话不多说上代码

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开发小程序

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。