当前位置:首页 >> 网络编程

微信小程序之滑动页面隐藏和显示组件功能的实现代码

用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现。往上滑动时,按钮消失。往下滑动时,按钮出现。

今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置。

效果图:
滑动前:

微信小程序之滑动页面隐藏和显示组件功能的实现代码

滑动后:

微信小程序之滑动页面隐藏和显示组件功能的实现代码

此功能是往上滑动消失,往下滑动出现。

实现步骤:

  • 编写页面代码与样式
  • 编写逻辑代码

wxml:

<view class="mask-con {{!hidden " bindtap="sendDynamic">
  <image class="sendDynamic mask-con 
	{
	{
	!hidden " src="/UploadFiles/2021-04-02/发布.png">

wxss:

.sendDynamic{
 height: 100rpx;
 width: 100rpx;
 bottom:100rpx;
 right: 60rpx;
 border-radius: 50%;
 position: fixed;
 box-shadow:5rpx 5rpx 5rpx #fccee5;
}
.mask-con{
 transition: 0.5s; 
 position: fixed;
 width: 100rpx;
 height: 100rpx;
 bottom:-100rpx;
 right: 60rpx;
 text-align: center;
 line-height: 100rpx;
 }
.mask-con-show{
 bottom: 100rpx;
}

js:

data: {
 hidden:false,
 scrollTop: 0
 },
 onPageScroll(ev){
 var _this = this;
 if (ev.scrollTop <= 0) {
  ev.scrollTop = 0;
 } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
  ev.scrollTop = wx.getSystemInfoSync().windowHeight;
 }
 if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
  this.setData({
  hidden:true
  })
 } else {
  this.setData({
  hidden:false
  })
 }
 setTimeout(function () {
  _this.setData({
  scrollTop: ev.scrollTop
  })
 }, 0)
 },

以上简单三步,完成目标。

总结