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

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

效果图：

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>

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