用csdnAPP的使用者都知道，在釋出blink動態時，那個紅色按鈕會隨著你滾動頁面消失或者出現。往上滑動時，按鈕消失。往下滑動時，按鈕出現。

今天我們就模仿一下這個功能，只不過我們換中樣式，讓它逐漸滑出頁面，或逐漸從頁面之外滑到固定位置。

效果圖：
滑動前：

滑動後：

此功能是往上滑動消失，往下滑動出現。

實現步驟：

• 編寫頁面程式碼與樣式
• 編寫邏輯程式碼

wxml:

<view class="mask-con {{!hidden ? 'mask-con-show' : ''
}
}
sendDynamic" bindtap="sendDynamic">
    <image class="sendDynamic mask-con 
	{
	{
	!hidden ? 'mask-con-show' : ''
	}
	}
	" src="cloud://hualibiaobaiqiang-1omla.6875-hualibiaobaiqiang-1omla-1302418355/me_icon/釋出.png">
	</image>
</view>

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)
 },

以上簡單三步，完成目標。

總結

到此這篇關於微信小程式中的滑動頁面隱藏和顯示元件功能的實現程式碼的文章就介紹到這了,更多相關小程式滑動頁面隱藏和顯示元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！