微信公众号开发

微信小程序页面滚动时,固定元素半透明右移;页面停止滚动时,固定左移恢复原样

本文主要是介绍微信小程序页面滚动时,固定元素半透明右移;页面停止滚动时,固定左移恢复原样,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

效果图:

 

js

const app = getApp()

Page({
    data: {
        text: "楚河汉街, 人流如织, 武汉的春天如约而至, 如今的岁月静好, 是一群平凡人的伟大逆行换来的, 谨以此片献给为武汉拼过命的每个人!在最困难的时期, 武汉没有从天而降的英雄,只有一个个挺身而出的普通人,他们会和医护人员共同奋斗在前线。他们是厨师, 是司机, 是民警, 是教师, 是学生…他们, 是每一个用行动为武汉加油的人。信念, 具有打败一切困难的力量。胜利, 是众志成城凝聚而成的光。那些曾经未知的恐惧和伤痛的无奈,让武汉人民对生命有了更为深刻的体验,对生活有了更为奋力的追求,因此他们能在向死而生的夹缝中,保有希望的长存。凛冬已过, 疫霾散去,长江大桥车水马龙,黄鹤楼再次熠熠生辉,错过的春天, 正在归来,让我们共同期待最美四月天!"
    },
    onPageScroll: function(e) {
        debugger
        this.setData({
            shopMoveRight: true,
            scrollTop: e.scrollTop,
        })
        let timer = setTimeout(() => {
            if (this.data.scrollTop === e.scrollTop) {
                this.setData({
                    scrollTop: e.scrollTop,
                })
                console.log('滚动结束');
                clearTimeout(timer);
                this.setData({
                    shopMoveRight: false,
                    shopMoveLeft: true
                })
            }
        }, 500)
        this.setData({
            shopMoveLeft: false
        })
    },
})

wxss

.con {
  font-size: 40rpx;
  line-height: 80rpx;
}
.fix.moveright {
  -webkit-animation: right 0.5s ease;
  animation: right 0.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes right {
  from {
    right: 14px;
    opacity: 1;
  }
  to {
    right: -120px;
    opacity: 0.5;
  }
}
@keyframes right {
  from {
    right: 14px;
    opacity: 1;
  }
  to {
    right: -120px;
    opacity: 0.5;
  }
}
.fix.moveleft {
  -webkit-animation: left 0.5s ease;
  animation: left 0.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes left {
  from {
    right: -120px;
    opacity: 0.5;
  }
  to {
    right: 14px;
    opacity: 1;
  }
}
@keyframes left {
  from {
    right: -120px;
    opacity: 0.5;
  }
  to {
    right: 14px;
    opacity: 1;
  }
}
.fix {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360rpx;
  height: 128rpx;
  right: 28rpx;
  bottom: 109rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
  border-radius: 80rpx;
}
.fix .consul {
  text-align: center;
  line-height: 40rpx;
  font-size: 35rpx;
  color: rebeccapurple;
}

wxml

<view class="con">{{text}}{{text}}{{text}}</view>
<view class="fix {{shopMoveRight?'moveright':''}} {{shopMoveLeft?'moveleft':''}}">
    <view class="consul">武汉的春天已来</view>
</view>

 

这篇关于微信小程序页面滚动时,固定元素半透明右移;页面停止滚动时,固定左移恢复原样的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!