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


Posted in Javascript onMay 09, 2019

在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面就用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
  });
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
jquery登录的异步验证操作示例
May 09 #jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 #Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 #Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 #Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 #Javascript
详解es6新增数组方法简便了哪些操作
May 09 #Javascript
Vue函数式组件-你值得拥有
May 09 #Javascript
You might like
解析PHP工厂模式的好处
2013/06/18 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
销售团队激励口号
2014/06/06 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
2014年信用社工作总结
2014/11/25 职场文书
武当山导游词
2015/02/03 职场文书
广告业务员岗位职责
2015/02/13 职场文书
公诉意见书范文
2015/06/05 职场文书
黄河绝恋观后感
2015/06/08 职场文书
企业催款函范本
2015/06/24 职场文书
小学班级标语口号大全
2015/12/26 职场文书
成人成长感言如何写?
2019/08/16 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android