欢迎访问我的个人博客

最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。原因是我不停的去 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});}})

微信小程序中实现吸顶效果(流畅、不卡顿)相关推荐

微信小程序搜索框吸顶效果实现
业务场景主页要做一个搜索框,滑动主页页面的时候,搜索框始终位于导航栏下面,位置不变,不随页面的滑动而滑动,这种效果被称为"吸顶"效果. 点击搜索框,弹出上层搜索详情的视图层,搜索 ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
微信小程序轮播中的current_手把手教你美化微信小程序中的轮播效果
微信小程序现在依然很火,相信大家有目共睹:所以作为前端开发者,掌握如何开发小程序,是一项必备技能了,你觉得呢? 相对于PC和H5开发,小程序坑很多,所以需要慢慢"踩",被坑多了,路 ...
微信小程序实现滚动吸顶
1.实现效果 2.实现原理方法一:position:sticky简单粗暴,但存在部分机型不支持 1.position:sticky( position: -webkit-sticky): 类似pos ...
在微信小程序中实现文字呼吸效果
之前写过一篇文章介绍了在网页中使用js实现文字的呼吸效果,点击跳转,但是这种方式里边通过style设置文字样式,在wxml中标签里面的运用是不可行的,因此需要探究一种新的设置方式. wxml代码 &l ...
微信小程序中实现一个金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
在微信小程序中编写金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...

微信小程序中实现吸顶效果(流畅、不卡顿)

效果图

代码部分

wxml

wxss

js

微信小程序中实现吸顶效果(流畅、不卡顿)相关推荐

最新文章

热门文章