微信小程序之滑動(dòng)頁(yè)面隱藏和顯示組件功能的實(shí)現(xiàn)代碼
用csdnAPP的用戶都知道,在發(fā)布blink動(dòng)態(tài)時(shí),那個(gè)紅色按鈕會(huì)隨著你滾動(dòng)頁(yè)面消失或者出現(xiàn)。往上滑動(dòng)時(shí),按鈕消失。往下滑動(dòng)時(shí),按鈕出現(xiàn)。
今天我們就模仿一下這個(gè)功能,只不過(guò)我們換中樣式,讓它逐漸滑出頁(yè)面,或逐漸從頁(yè)面之外滑到固定位置。
效果圖:
滑動(dòng)前:
滑動(dòng)后:
此功能是往上滑動(dòng)消失,往下滑動(dòng)出現(xiàn)。
實(shí)現(xiàn)步驟:
- 編寫頁(yè)面代碼與樣式
- 編寫邏輯代碼
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)頁(yè)面隱藏和顯示組件功能的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序滑動(dòng)頁(yè)面隱藏和顯示組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
分享js粘帖屏幕截圖到web頁(yè)面插件screenshot-paste
這篇文章主要為大家分享了js粘帖屏幕截圖到web頁(yè)面插件screenshot-paste的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03JS中把字符轉(zhuǎn)成ASCII值的函數(shù)示例代碼
這篇文章主要是對(duì)JS中把字符轉(zhuǎn)成ASCII值的函數(shù)示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11使用bootstrapValidator插件進(jìn)行動(dòng)態(tài)添加表單元素并校驗(yàn)
動(dòng)態(tài)添加表單元素,并調(diào)用bootstrapValidator的方法為表單添加校驗(yàn)規(guī)則,調(diào)用addField()方法實(shí)現(xiàn)功能。下面通過(guò)本文看下具體實(shí)現(xiàn)方法吧2016-09-09js實(shí)現(xiàn)數(shù)字遞增特效【仿支付寶我的財(cái)富】
本篇文章主要介紹了js實(shí)現(xiàn)仿支付寶我的財(cái)富里的數(shù)字遞增特效,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05深入理解JavaScript系列(4) 立即調(diào)用的函數(shù)表達(dá)式
大家學(xué)JavaScript的時(shí)候,經(jīng)常遇到自執(zhí)行匿名函數(shù)的代碼,今天我們主要就來(lái)想想說(shuō)一下自執(zhí)行2012-01-01