详解微信小程序回到顶部的两种方式
在做微信小程序开发时，遇到一个问题，要如何实现返回顶部的功能，下面就用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
});
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍微信小程序 跳转页面的两种方法详解，包括了微信小程序 跳转页面的两种方法详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序 跳转页面 小程序页面有2种跳转，可以在wxml页面或者js中： 1，在wxml页面中： 2，在js页面中： 【注意】此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。 app.json文件中tabBar中注册过的tab页，即为“tabB
-
本文向大家介绍微信小程序 Page（）函数详解，包括了微信小程序 Page（）函数详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序——Page（）: 在开发微信小程序的时候遇到函数，或者不明白的地方，最好上官网查询，相应的知识，这里小编帮大家整理了下page()函数的用法。 Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函
-
本文向大家介绍微信小程序 Flex布局详解，包括了微信小程序 Flex布局详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序页面布局方式采用的是Flex布局。 Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。 Flex布局的主要特征是能够调整其子元素在
-
本文向大家介绍微信小程序 video组件详解，包括了微信小程序 video组件详解的使用技巧和注意事项，需要的朋友参考一下 主要属性： 效果图： ml: js： 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
本文向大家介绍微信小程序 form组件详解，包括了微信小程序 form组件详解的使用技巧和注意事项，需要的朋友参考一下 表单： 将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交 主要属性： 效果图： ml: ss: js: 复制代码 注意： form表单组件 是提交form内的所有选中属性的值， 注意
-
本文向大家介绍微信小程序 for 循环详解，包括了微信小程序 for 循环详解的使用技巧和注意事项，需要的朋友参考一下 1，wx:for 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 事例如下： wxml文件: 可以使用wx:for-item指定数组当前元素的变量名 可以使用wx