微信小程式實現吸頂效果
阿新 • • 發佈:2020-01-09
最開始的時候,在小程式中實現吸頂效果,開發工具看起來還挺好的,但是在真機上就會有問題了。 原因是我不停的去 setData 會導致操作反饋延遲嚴重,無法及時將操作處理結果及時傳遞到檢視層。
後面就對程式碼進行了調整,避免不停的去setData
效果圖
吸頂前
吸頂後
程式碼部分
wxml
<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view> <view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view> <view class="navbar-wrap"> <view class="column {{isFixedTop?'fixed':''}}" id="navbar"> <view class="block active">新品推薦</view> <view class="block">限時優惠</view> <view class="block">火爆熱搜</view> <view class="block">猜你喜歡</view> </view> <!-- 用於吸頂後 佔位用的 --> <view class="column" wx:if="{{isFixedTop}}"></view> </view> <block wx:for="{{20}}" wx:key="list"> <view style="width: 100%; height: 120rpx; background: #f0f0f0; margin: 20rpx auto;"></view> </block>
wxss
view,text { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .navbar-wrap { width: 100%; } .navbar-wrap .column { width: 100%; height: 80rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around; background: #fff; border-bottom: solid 1px #eee; top: 0; left: 0; z-index: 100; } .navbar-wrap .column.fixed { position: fixed; } /* 以下的程式碼不重要 */ .navbar-wrap .column .block { width: 25%; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 30rpx; color: #333; letter-spacing: 1px; position: relative; } .navbar-wrap .column .block::after { content: ""; width: 60%; height: 3px; border-radius: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: transparent; } .navbar-wrap .column .block.active { color: #1490ce; font-weight: bold; } .navbar-wrap .column .block.active::after { background: linear-gradient(160deg,rgba(8,220,230,0.7) 10%,rgba(0,140,255,0.7) 90%); }
js
Page({ data: { navbarInitTop: 0,//導航欄初始化距頂部的距離 isFixedTop: false,//是否固定頂部 },/** * 生命週期函式--監聽頁面載入 */ onLoad: function(options) { },/** * 生命週期函式--監聽頁面顯示 */ onShow: function() { var that = this; if (that.data.navbarInitTop == 0) { //獲取節點距離頂部的距離 wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) { if (rect && rect.top > 0) { var navbarInitTop = parseInt(rect.top); that.setData({ navbarInitTop: navbarInitTop }); } }).exec(); } },/** * 監聽頁面滑動事件 */ onPageScroll: function(e) { var that = this; var scrollTop = parseInt(e.scrollTop); //滾動條距離頂部高度 //判斷'滾動條'滾動的距離 和 '元素在初始時'距頂部的距離進行判斷 var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false; //為了防止不停的setData,這兒做了一個等式判斷。 只有處於吸頂的臨界值才會不相等 if (that.data.isFixedTop === isSatisfy) { return false; } that.setData({ isFixedTop: isSatisfy }); } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。