标签：opacity right 滚动 0.5 animation 固定 webkit scrollTop 页面

效果图：

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>

标签：opacity,right,滚动,0.5,animation,固定,webkit,scrollTop,页面
来源： https://blog.csdn.net/qq_40112494/article/details/115533256

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。