快捷導(dǎo)航

微信小程序之滑動(dòng)頁面隱藏和顯示組件功能的實(shí)現(xiàn)代碼

更新時(shí)間：2020年06月19日 14:26:43 作者：聶大哥

這篇文章主要介紹了微信小程序之滑動(dòng)頁面隱藏和顯示組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

用csdnAPP的用戶都知道，在發(fā)布blink動(dòng)態(tài)時(shí)，那個(gè)紅色按鈕會(huì)隨著你滾動(dòng)頁面消失或者出現(xiàn)。往上滑動(dòng)時(shí)，按鈕消失。往下滑動(dòng)時(shí)，按鈕出現(xiàn)。

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

效果圖：
滑動(dòng)前：

在這里插入圖片描述

滑動(dòng)后：

在這里插入圖片描述

此功能是往上滑動(dòng)消失，往下滑動(dòng)出現(xiàn)。

實(shí)現(xiàn)步驟：

編寫頁面代碼與樣式
編寫邏輯代碼

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/發(fā)布.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)
 },

以上簡(jiǎn)單三步，完成目標(biāo)。

總結(jié)

到此這篇關(guān)于微信小程序之滑動(dòng)頁面隱藏和顯示組件功能的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序滑動(dòng)頁面隱藏和顯示組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: