脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序回到顶部

详解微信小程序回到顶部的两种方式

 更新时间：2019年05月09日 11:25:56   作者：sxs1995  
这篇文章主要介绍了详解微信小程序回到顶部的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在做微信小程序开发时，遇到一个问题，要如何实现返回顶部的功能，下面就用2种方法实现

一,使用view形式的回到顶部

HTML：

<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

 CSS：

/* 返回顶部 */
.goTop{
 height: 80rpx;
 width: 80rpx;
 position: fixed;
 bottom: 50rpx;
 background: rgba(0,0,0,.3);
 right: 30rpx;
 border-radius: 50%;
}

JS：

 // 获取滚动条当前位置
 onPageScroll: function (e) {
  console.log(e)
  if (e.scrollTop > 100) {
   this.setData({
    floorstatus: true
   });
  } else {
   this.setData({
    floorstatus: false
   });
  }
 },

 //回到顶部
 goTop: function (e) { // 一键回到顶部
  if (wx.pageScrollTo) {
   wx.pageScrollTo({
    scrollTop: 0
   })
  } else {
   wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
   })
  }
 },

二.使用scroll-view形式的回到顶部

<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

CSS：

/* 返回顶部 */
.goTop{
 height: 80rpx;
 width: 80rpx;
 position: fixed;
 bottom: 50rpx;
 background: rgba(0,0,0,.3);
 right: 30rpx;
 border-radius: 50%;
}

JS：

 data:{
  topNum: 0
 }

 // 获取滚动条当前位置
 scrolltoupper:function(e){
  console.log(e)
  if (e.detail.scrollTop > 100) {
   this.setData({
    floorstatus: true
   });
  } else {
   this.setData({
    floorstatus: false
   });
  }
 },

 //回到顶部
 goTop: function (e) { // 一键回到顶部
  this.setData({
   topNum: this.data.topNum = 0
  });
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 微信小程序自定义导航栏功能的实现

    微信小程序自定义导航栏功能的实现

    本文介绍了微信小程序自定义导航栏功能的实现方法,首先,需要去掉原生导航栏,可以通过在page.json中去掉navigationBarTitleText并加上"navigationStyle":"custom"来实现,然后,可以使用组件封装来实现自定义导航栏的功能,感兴趣的朋友一起看看吧
    2025-01-01
  • JavaScript设计模式策略模式案例分享

    JavaScript设计模式策略模式案例分享

    这篇文章主要介绍了JavaScript设计模式策略模式案例分享，策略设计模式就是指一个问题匹配多个解决方法，不一定要用到哪一个，而且有可能随时增加多个方案
    2022-06-06
  • Javascript this 的一些学习总结

    Javascript this 的一些学习总结

    相信有C++、C#或Java等编程经验的各位，对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言，它和C++、C#或Java一样都包含this关键字，接下来我们将向大家介绍Javascript中的this关键字
    2012-08-08
  • javascript实现显示和隐藏div方法汇总

    javascript实现显示和隐藏div方法汇总

    本文章通过几个简单的实例告诉你如何来实例关于隐藏与显示div层及关闭层与隐藏的区别分析哦，有需要的同学可以参考一下本文章。
    2015-08-08
  • p5.js入门教程之平滑过渡(Easing)

    p5.js入门教程之平滑过渡(Easing)

    本篇文章主要介绍了p5.js入门教程之平滑过渡(Easing)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 再次谈论Javascript中的this

    再次谈论Javascript中的this

    javascript中的this应用非常广泛，对js中this总是似是而非的感觉，今天小编豁然开朗，然后再次给大家谈论js中的this关键，感兴趣的朋友跟着小编一起看看吧
    2016-06-06
  • JavaScript使用addEventListener添加事件监听用法实例

    JavaScript使用addEventListener添加事件监听用法实例

    这篇文章主要介绍了JavaScript使用addEventListener添加事件监听的方法,实例分析了addEventListener方法的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • 浅谈JavaScript 的执行顺序

    浅谈JavaScript 的执行顺序

    JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马
    2015-08-08
  • JS深拷贝的4种实现方法

    JS深拷贝的4种实现方法

    对于js中的对象的深拷贝在项目的开发中比较常用到,本文就来介绍一下JS深拷贝的4种实现方法,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • 微信小程序日程预约功能实现

    微信小程序日程预约功能实现

    本文介绍了如何使用微信小程序开发一个日程预约系统,该系统包括顶部日期选择器、中部的canvas绘制区和底部的数据回显区,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-02-02

最新评论