微信小程序怎么制作回到顶部按钮-创新互联

这篇文章主要介绍“微信小程序怎么制作回到顶部按钮”，在日常操作中，相信很多人在微信小程序怎么制作回到顶部按钮问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序怎么制作回到顶部按钮”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联公司专注于延津网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供延津营销型网站建设，延津网站制作、延津网页设计、延津网站官网定制、重庆小程序开发服务，打造延津网络公司原创品牌,更为您提供延津网站排名全网营销落地服务。

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

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

接下就是对代码的分析了：
在这里我们如果要使用滚动事件的话，小程序规定 最外层一定要使用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.scrollTop
if(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;
}

到此，关于“微信小程序怎么制作回到顶部按钮”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

文章名称：微信小程序怎么制作回到顶部按钮-创新互联
标题URL：https://www.cdcxhl.com/article22/dsogcc.html

成都网站建设公司_创新互联，为您提供网站收录、定制开发、小程序开发、营销型网站建设、手机网站建设、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联