小程序制作回到顶部按钮

我们先看一下效果吧，直接上图。

第一种情况,当页面在顶部的时候，回到顶部按钮是不会出现的。

第二种情况,当页面在离开顶部一定距离的时候，回到顶部按钮出现

接下就是对代码的分析了：
在这里我们如果要使用滚动事件的话，小程序规定最外层一定要使用scroll-view标签进行包裹，然后在设置scroll-y=“true” 意思是允许页面了纵向滚动，scroll-top是滚动到顶部做处理，一般绑定一个事件，bindscrolltolower同样的原理，滚动到底部做处理，bindscroll表示在滚动的时候出发这个事件。下面WXML内部的话，就是我们回到顶部的按钮设置，我们在点击它时绑定一个事件goTop，让他的滚动高度等于0，这样它就回到顶部了。

WXML代码：

  <scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}"   bindscroll="scroll" bindscrolltolower= "scrolltolower" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">//*********************<view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}"><view class="icon-gotop">顶部</view></view>//*********************</view>

JS代码：

    //回到顶部按钮Page({data: {scrollTop: 0},goTop: function(e){this.setData({scrollTop:0})},scroll:function(e,res){// 容器滚动时将此时的滚动距离赋值给 this.data.scrollTopif(e.detail.scrollTop > 500){this.setData({floorstatus: true});}else {this.setData({floorstatus: false});}})

WXSS代码：

.bigWrap{background:#eee;
}
/*goTop回到顶部图标start*/
.com-widget-goTop {position: fixed;bottom: 125px;right: 5px;background: rgba(0,0,0,0.48);border-radius: 50%;overflow: hidden;z-index: 500;
}
.com-widget-goTop .icon-gotop{background-color: rgba(0,0,0,0.8);display: inline-block;width: 50px;height: 50px;line-height: 68px;font-size: 12px;color: #ffffff;text-align: center;border-radius: 50%;background: url(http://m.dev.vd.cn/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center -1110px;-webkit-background-size: 50px auto;
}

小程序制作回到顶部按钮相关推荐

微信小程序自定义回到顶部
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.自定义回到顶部按钮二.使用步骤 1.第一步获取屏幕被卷去多少距离 2.进行判断,例如我需要屏幕滚到大于600的时 ...
零基础也能学会的微信小程序制作带分享按钮的视频列表页
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 学习笔记属性说明 s ...
告别繁琐滑动，微信小程序一键回到顶部功能
前言在日常使用微信小程序时,你是否曾经遇到过翻页疲劳的问题?或者在滑动页面时不断滑动才能回到顶部的尴尬情况?如果是这样,那么你一定不想错过今天的文章.我将为大家介绍一种简单而实用的方法,让你轻松实现 ...
BackToTop.js 为你的网站添加“回到顶部”按钮
图片来源:Inspiring Wallpapers 就像上图中的超人一样,你的读者也想要一飞冲天的感觉. 没错,你的网站需要一个 "回到顶部" 的按钮. 每当你的文章写得很长,或者 ...
微信小程序｜使用小程序制作一个核酸检测点查询工具
小程序创建小程序申请腾讯地图用户key 实现小程序界面全国省市区数据 API 提交资料认证并申请接口拼接参数调用接口渲染数据优化细节出门在外,没有核酸证明寸步难行,此文将教你如何通过小程序 ...
微信小程序｜使用小程序制作一个马赛克处理工具
此文主要使用微信小程序制作一个马赛克处理工具,这个场景在生活中也非常常见,例如新闻之类有些视频或者图片不想给大众展示就会将其和谐掉,这就是马赛克应用. 开发步骤功能开发实现API 接口响应开发步 ...
使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
微信小程序｜使用小程序制作一个节日祝福生成器
一.前言不知不觉间还有几天就是新的一年了,值此佳节祝福语肯定也是必不可少,毕竟难得有机会能给ta发消息,ta会不会也在想终于又能给你回消息呢.跟随此文使用小程序制作一个祝福语生成器,让你的祝福脱颖而 ...
菜鸡教程（1）：简易游戏每周推荐小程序制作
写在前面: 1. 阅读本文最好具备一定html+css+js基础,并已成功注册微信小程序,成功下载了开发工具 2.菜鸡菜笔,如有不正,还请大佬们不吝惜赐教接下来开始小程序的制作 1.首先 ...