吸顶：指的是当页面滚动时，让某个盒子固定在头部位置，一般都是固定一个标签栏
实现思路
- 使用vant组件库提供的小程序组件，封装完美，复制即用，真香
vant-Weapp 粘性布局
我们需要先安装vant-weapp插件，构建npm模块，在json中注册组件，才能使用，如何安装看官网说明
值得注意的是，
你如果使用了微信小程序自带的scroll-view组件，并在其中使用粘性布局组件会失效；
大概原因应该是scroll-view的滚动无法让粘性布局组件感知到自己有没有到顶部……
解决思路：换其他思路（不用scroll-view或者不用vant粘性布局）
//scroll-view
<scroll-view scroll-y="true" style="height: 300rpx;" >
//vant吸顶无法生效
<van-sticky>
<van-button type="primary">基础用法</van-button>
</van-sticky>
</scroll-view>
- 在scroll-view 中自己写标签栏，动态绑定class类名，类名对应的样式为固定定位在头部，从而实现吸顶效果
// wxml代码
//滚动方向
<scroll-view scroll-y="true" style="height: 300rpx;"
bindscroll="scroll"> //滚动事件
//动态绑定样式的标签栏
//定义了fixed变量，使用判断其为true，绑定样式为fixedTop，否则为''
<view id="boxFixed" class="{
{fixed==true?'fixedTop':''}}">
<view>标签</view>
</view>
</scroll-view>
// wxss样式代码
.fixedTop{
position: fixed;
left: 0;
top: 0;
}
// js代码
//滚动事件
data{
fixed:false
}
scroll: function (e) {
//拿到滚动高度，达到标签栏高度就改变状态
// console.log(e.detail.scrollTop);
if (e.detail.scrollTop >= 547) {
this.setData({
fixed: true
})
} else {
this.setData({
fixed: false
})
}
},
- 写两个盒子，一个固定在头部，通过变量默认隐藏（hidden属性），一个在滚动容器内正常显示，达到一定高度改变状态，切换显示隐藏
- 以后再说
返回顶部
scroll-view 自带了属性 scroll-top="{ {scrollTop}}" 代表竖向滚动条的距离
scroll-with-animation=“true” 代表滚动条位置改变的动画
//wxml 代码
<scroll-view scroll-y
scroll-top="{
{scrollTop}}"
scroll-with-animation="true"
style="height: 100vh;">
<view>我是大概有100vh的内容</view>
<button bindtap="goTop">Top</button>
</scroll-view>
//js代码
data{
scrollTop:0
}
//回到顶部
goTop() {
//scroll-view的方法
this.setData({
scrollTop: 0
})
},
其他方式
如果没有用scroll-view，那么就更简单了。
微信小程序自带了滚动监听事件可以获取滚动高度
//如果你的盒子内就一个scroll-view盒子，在里面滚动触发不了该事件 enmmm
onPageScroll(e) {
// console.log(e);
console.log(scrollTop);
},
//回到顶部，点击事件调用这个方法，完事
wx.pageScrollTo({
scrollTop: 0
})