微信小程序实现吸顶效果
微信(小程序)  /  管理员 发布于 3年前   217
最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。 原因是我不停的去
会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层。
后面就对代码进行了调整,避免不停的去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 });
}})
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号