小程序点击返回顶部

wxml

<image src='../../images/agoproduct/totop.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

wxss

/* 返回顶部 */
.goTop{
    height: 72rpx;
    width: 72rpx;
    position: fixed;
    bottom: 26rpx;
    right: 31rpx;
  }

js

复制代码
 data: {
    // 返回顶部
    floorstatus: true
  },
  
// 获取滚动条当前位置
onPageScroll: function (e) {
  console.log(e)
  if (e.scrollTop > 150) {
    this.setData({
      floorstatus: true
    });
  } else {
    this.setData({
      floorstatus: false
    });
  }
},
//回到顶部
goTop: function (e) {  // 一键回到顶部
  if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
    })
  }
},
复制代码

 

<image src='../../images/agoproduct/totop.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
posted @   小那  阅读(194)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
点击右上角即可分享
微信分享提示