推荐文章

小程序右view悬浮，返回主页，返回顶部

wxss：

.gotop {
  position: fixed;
  right: 10px;
  bottom: 60px;
}
.gotop .box {
  display: flex; /*设置为flex布局*/
  flex-direction: column; /*rows*/
  justify-content: center; /*水平居中*/
  align-items: center;
  background-color: #e9e9e9;
  padding: 8px;
  margin-bottom: 5px;
}
.gotop .box .iconfont {
  font-size: 30rpx;
}
.gotop .box .text {
  font-size: 22rpx;
}

wxml：

<view class='gotop' wx:if="{{showgo}}">
   <view class='box' bindtap='gohome'>
      <view class='iconfont icon-shouye'> </view>
      <view class='text'>首页</view>
    </view>
    <view class='box' bindtap='gotop'>
      <view class='iconfont icon-xiangshangjiantou'> </view>
      <view class='text'>顶部</view>
    </view>
</view>

js：

Page({  
  data: {  
   showgo: false //显示右悬浮 
 },
 onPageScroll: function(e) {
    var that = this;
    //console.log(e); 监听滚动条，大于100显示，小于100隐藏
    if (e) {
      var showgo = e.scrollTop > 100 ? true : false;
      that.setData({
        showgo: showgo
      }) 
   } 
 },
  gohome: function() {
 
  //返回首页
   wx.switchTab({ 
     url: '/pages/index/index',   
 })  
}, 
gotop:function(e){  
  //返回顶部 
   if (wx.pageScrollTo) { 
     wx.pageScrollTo({
        scrollTop: 0
      })   
    } 
 }
})