最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。 原因是我不停的去 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" 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 }); } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]