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


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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
react同构实践之实现自己的同构模板
Mar 13 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
2006/11/25 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php中chdir()函数用法实例
2014/11/13 PHP
php实现用户登陆简单实例
2017/04/04 PHP
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python 读取DICOM头文件的实例
2018/05/07 Python
python操作excel让工作自动化
2019/08/09 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Django ORM filter() 的运用详解
2020/05/14 Python
python 负数取模运算实例
2020/06/03 Python
Python执行时间的几种计算方法
2020/07/31 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
模特大赛策划方案
2014/05/28 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
病假条格式范文
2015/08/17 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL