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