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

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

這篇文章主要介紹了微信小程序之滑動(dòng)頁面隱藏和顯示組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(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)
 },

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Chrome Form多次提交表單問題的解決方法
第一次提交可以，第二次提交就沒有任何響應(yīng)了。需要重新加載頁面后才可以提交，而這個(gè)問題在Firefox,IE下沒有出現(xiàn)。
2011-05-05
bootstrap下拉分頁樣式帶跳轉(zhuǎn)頁碼
這篇文章主要為大家詳細(xì)介紹了bootstrap下拉分頁樣式，帶跳轉(zhuǎn)頁碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
詳解JavaScript私有類字段和TypeScript私有修飾符
這篇文章主要介紹了JavaScript私有類字段和TypeScript私有修飾符，對私有類感興趣的同學(xué)，可以參考下
2021-04-04
原生javascript實(shí)現(xiàn)分享到朋友圈功能支持ios和android
本文主要介紹網(wǎng)上一個(gè)牛人寫的js可以實(shí)現(xiàn)在UC瀏覽器和QQ瀏覽器中調(diào)用瀏覽器內(nèi)置的分享組件進(jìn)行分享。
2016-05-05
js數(shù)組去重的N種方法(小結(jié))
本文給大家收藏整理了js數(shù)組去重的n種方法，大家可以根據(jù)自己需要選擇比較好的方法，感興趣的朋友一起看看吧
2018-06-06
javascript數(shù)組遍歷的方法實(shí)例分析
這篇文章主要介紹了javascript數(shù)組遍歷的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組遍歷及相關(guān)的some、every、filter、map等方法的使用技巧,需要的朋友可以參考下
2016-09-09
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之棧(Stack)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之棧(Stack),結(jié)合實(shí)例形式詳細(xì)分析了js中棧的概念、原理、定義及常見使用方法,需要的朋友可以參考下
2019-08-08
使用Electron自制錄屏軟件
錄屏軟件對于我們來說都不陌生了,本文我們要做的事情是實(shí)現(xiàn)自己的錄屏軟件,載體使用Electron,因?yàn)樗m合錄制桌面的場景,下面我們就來看看具體實(shí)現(xiàn)方法吧
2024-01-01
ESLint的簡單使用方法(js,ts,vue)
ESLint是一個(gè)用于統(tǒng)一團(tuán)隊(duì)編碼規(guī)范、減少代碼錯(cuò)誤的工具,它可以手動(dòng)安裝并配置,支持JavaScript、TypeScript和Vue.js等語言,文章詳細(xì)介紹了如何手動(dòng)下載和配置ESLint,需要的朋友可以參考下
2025-01-01
uni-app實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了uni-app實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11