微信小程序实现（置顶）和（置底）功能

微信扫一扫以上小程序【许愿灯池】可以查看具体置顶和置底功能

效果图：

具体思路：

①要用到scroll-view组件，在组件里面使用scroll-y属性，同时我们要绑定一个id

②将置顶和置底的图片引入进来，绑定一个bindtap事件

③调用wx.pageScrollTo({})来滚动页面，后调用wx.createSelectorQuery().select('#id').boundingClientRect（{}）来获取id，同时可以获取滚动条的最大高度

代码展示：

index.wxml

<scroll-view scroll-y id="scroll-y">
    //中间放入你的内容
</scroll-view>


<view class="top" bindtap="top">
    <image src="/icon/top.png" class="top_image"></image>
</view>

<view class="bottom" bindtap="bottom">
  <image src="/icon/bottom.png" class="bottom_img"></image>
</view>

 

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()
  },

 

总结：

通过以上代码可以搭建出和【许愿灯池】一样  置顶和置底  功能。如果想知道具体的效果，可以微信搜一搜【许愿灯池】或是二维码扫描如下：