微信小程序实现点击返回顶层的方法

最近在研究微信小程序，被这个返回顶层给坑了一波，下面贴代码

wxml代码：

<scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun">
<block wx:for="{{sortArr}}">
<template is="spL" data="{{item}}"></template>
</block>
</scroll-view> 
<!-- 联系客服 -->
<view class="findOur fliexBox"><contact-button type="default-light" size="15" session-from="weapp"></contact-button>客服</view>
<!-- 拨打电话 -->
<view class="callOur fliexBox" bindtap="call">电话</view>
<view class="fliexBox" style=" bottom: 150rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun">顶层</view>

js代码：

var app = getApp();
Page({
data: {
hidden: true,
list: [],
scrollTop: {
scroll_top: 0,
goTop_show: false
},
scrollHeight: 0,
floorstatus:true,
sortArr:[
{
id: 1,
img: "../../images/2.jpg",
title: "君御豪园住宅",
introduction: "杭州不限购不限贷口住宅",
money: 5000,
vperson: 115,
tperson: 0
}
],
},
scrollTopFun: function (e) {
console.log(e.detail);
if (e.detail.scrollTop > 300) {//触发gotop的显示条件 
this.setData({
'scrollTop.goTop_show': true
});
} else {
this.setData({
'scrollTop.goTop_show': false
});
}
},
goTopFun: function (e) {
var _top = this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样，否则无效，所以这里加了个判断 
if (_top == 0) {
_top = 1;
} else {
_top = 0;
}
this.setData({
'scrollTop.scroll_top': _top
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
scrollHeight: res.windowHeight
});
}
});
},

}）

wxss代码：

.fliexBox{
width: 100rpx;
height: 50rpx;
background-color: #5db13b;
color: #ffffff;
text-align: center;
position: fixed;
right: 0rpx;
bottom: 85rpx;
border-radius: 20rpx 0rpx 0rpx 20rpx;
font-size: 26rpx;
line-height: 50rpx;
opacity: .6;
}
.callOur{
bottom: 20rpx;
}
contact-button{
opacity: 0;
position: absolute;
}

主要是需要把scroll-view 组件的高度设置起来而且不能是百分比 如100%这样，可以是rpx，这样才可以监测到滑动的距离。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# 微信小程序  # 返回顶层  # 微信小程序之分享页面如何返回首页的示例  # 微信小程序返回多级页面的实现方法  # 微信小程序 详解页面跳转与返回并回传数据  # 6行代码实现微信小程序页面返回顶部效果  # 客服  # 周期函数  # 才可以  # 杭州  # 一波  # 大家多多  # 拨打电话  # 主要是  # 加载  # 豪园  # size  # session  # default  # light  # contact  # fliexBox  # findOur  # 微信小  # type  # button 

相关文章： 如何快速打造个性化非模板自助建站？  如何确认建站备案号应放置的具体位置？  如何快速查询域名建站关键信息？  如何高效配置香港服务器实现快速建站？  活动邀请函制作网站有哪些,活动邀请函文案？  建站之星如何快速更换网站模板？  建站之星伪静态规则如何设置？  如何快速重置建站主机并恢复默认配置？  如何快速建站并高效导出源代码？  制作网站的过程怎么写,用凡科建站如何制作自己的网站？  如何快速生成专业多端适配建站电话？  电商平台网站制作流程,电商网站如何制作？  如何在阿里云域名上完成建站全流程？  如何通过宝塔面板实现本地网站访问？  如何在腾讯云服务器上快速搭建个人网站？  网站制作中优化长尾关键字挖掘的技巧,建一个视频网站需要多少钱？  移民网站制作流程,怎么看加拿大移民官网？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  如何在阿里云部署织梦网站？  如何快速生成ASP一键建站模板并优化安全性？  如何高效利用亚马逊云主机搭建企业网站？  seo网站制作优化,网站SEO优化步骤有哪些？  如何挑选高效建站主机与优质域名？  制作旅游网站html,怎样注册旅游网站？  宝塔面板如何快速创建新站点？  如何登录建站主机？访问步骤全解析  常州自助建站费用包含哪些项目？  高防服务器：AI智能防御DDoS攻击与数据安全保障  如何通过服务器快速搭建网站？完整步骤解析  如何注册花生壳免费域名并搭建个人网站？  如何选择香港主机高效搭建外贸独立站？  建站之星如何优化SEO以实现高效排名？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  建站上市公司网站建设方案与SEO优化服务定制指南  Java解压缩zip - 解压缩多个文件或文件夹实例  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  如何通过NAT技术实现内网高效建站？  网站制作壁纸教程视频,电脑壁纸网站？  相册网站制作软件,图片上的网址怎么复制？  小型网站制作HTML,*游戏网站怎么搭建？  怀化网站制作公司,怀化新生儿上户网上办理流程？  建站之星免费模板：自助建站系统与智能响应式一键生成  如何在阿里云服务器自主搭建网站？  广州建站公司哪家好？十大优质服务商推荐  建站之星免费版是否永久可用？  如何自定义建站之星网站的导航菜单样式？  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  如何优化Golang Web性能_Golang HTTP服务器性能提升方法  如何通过VPS搭建网站快速盈利？  高端云建站费用究竟需要多少预算？