微信小程序--特定区域滚动到顶部时固定的方法
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了微信小程序--特定区域滚动到顶部时固定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
项目要求：
如图所示，当页面滚动到导航条到达搜索栏下方时固定，向上滚动到导航条位置时又恢复原样。
以下是代码展示：
1.wxml
<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
<view class="{{top>130 ? 'topnav' : ''}}">
<--这里写大于130，表示距离顶部130rpx时固定，可根据需要修改-->
...
</view>
</scroll-view>
2.wxss
.topnav{
position: fixed;
top: 85rpx;
z-index:99;
background: #fff;
width: 100%;
}
3.js
data = {
top:0
}
//控制回到顶部按钮的显示与消失
scrollTopFun(e){
let that = this;
that.top = e.detail.scrollTop;
that.$apply();
}
其实整个思路很简单， 小程序自带的组件scroll-view自带有属性bindscroll（滚动时触发）。通过这个属性获取浏览器滚动条距离顶部的位置，通过这个位置判断class类的显示就可以了。
以上所述是长沙网络推广给大家介绍的微信小程序--特定区域滚动到顶部时固定的方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！