微信扫一扫以上小程序【许愿灯池】可以查看具体置顶和置底功能
效果图：
具体思路：
①要用到scroll-view组件，在组件里面使用scroll-y属性，同时我们要绑定一个id
②将置顶和置底的图片引入进来，绑定一个bindtap事件
③调用wx.pageScrollTo({})来滚动页面，后调用wx.createSelectorQuery().select('#id').boundingClientRect（{}）来获取id，同时可以获取滚动条的最大高度
代码展示：
index.wxml
//中间放入你的内容
index.wxss
.top{
display: flex;
position: fixed;
bottom: 145rpx;
right: 22rpx;
width: 60rpx;
height: 60rpx;
}
.top_image{
width: 60rpx;
height: 60rpx;
}
.bottom{
display: flex;
position: fixed;
bottom: 55rpx;
right: 22rpx;
width: 60rpx;
height: 60rpx;
}
.bottom_img{
width: 60rpx;
height: 60rpx;
}
index.js
top(){
wx.pageScrollTo({
scrollTop: 0,
duration:500 //设置滚动延时
})
},
bottom(){
wx.createSelectorQuery().select('#scroll-y').boundingClientRect(function(rect){
// 使页面滚动到底部
wx.pageScrollTo({
scrollTop: rect.height,
duration:500 //设置滚动延时
})
}).exec()
},
总结：
通过以上代码可以搭建出和【许愿灯池】一样 置顶和置底 功能。如果想知道具体的效果，可以微信搜一搜【许愿灯池】或是二维码扫描如下：