怎么在微信小程序中制作返回顶部按钮?

时间：2023-07-01 14:05 阅读数：76 人阅读分类：知识百科

　怎么在微信小程序中制作返回顶部按钮?想要了解微信小程序中制作返回顶部按钮吗?今天小编给大家带来了怎么在微信小程序中制作返回顶部按钮?想要了解学习制作微信小程序的小伙伴就赶紧过来看看吧。

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

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

　　接下就是对代码的分析了：

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

　　WXML代码：

　　//*********************

　　顶部

　　//*********************

　　复制代码

　　JS代码：

　　//回到顶部按钮

　　Page({

　　data: {

　　scrollTop: 0

　　goTop: function(e){

　　this.setData({

　　scrollTop:0

　　})

　　scroll:function(e,res){

　　// 容器滚动时将此时的滚动距离赋值给 this.data.scrollTop

　　if(e.detail.scrollTop > 500){

　　this.setData({

　　floorstatus: true

　　});

　　}else {

　　this.setData({

　　floorstatus: false

　　});

　　}

　　})

　　复制代码

　　WXSS代码：

　　bigWrap{

　　background:#eee;

　　}

　　/goTop回到顶部图标start/

　　-widget-goTop {

　　position: fixed;

　　bottom: 125px;

　　right: 5px;

　　background: rgba(0,0,0,0.48);

　　border-radius: 50%;

　　overflow: hidden;

　　z-index: 500;

　　}

　　-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: urlno-repeat center -1110px;

　　-webkit-background-size: 50px auto;

　　}

　　复制代码

　　以上就是怎么在微信小程序中制作返回顶部按钮？的全部内容，希望能帮助到大家,更多小程序、小程序资讯请关注微小乔网站。