微信小程序scroll-view回到顶部
说明:使用scroll-view,当数据过多,scroll-view容器滚动过长的位置时,如何回到scroll-view的顶部解决方法(仅放置重要代码):在.wxml文件中,添加scroll-top,并使用model双向绑定<scroll-view class="scroll-content" scroll-ymodel:scroll-top="{{myScrollTop}}" >..
·
说明:
使用scroll-view,当数据过多,scroll-view容器滚动过长的位置时,如何回到scroll-view的顶部
解决方法(仅放置重要代码):
- 在.wxml文件中,添加scroll-top,并使用model双向绑定
<scroll-view class="scroll-content" scroll-y model:scroll-top="{{myScrollTop}}" >
...内容
</scroll-view>
<!-- 回到顶部的图标,含有bindtap或catchtap事件 -->
<text catchtap="totop" class="fa fa-chevron-up primary-color"></text>
- 在.js文件中,添加myScrollTop变量,并在totop事件中修改myScrollTop
Page({
/**
* 组件的初始数据
*/
data: {
// 竖向滚动条位置
scrollTop: 0,
},
/**
* 返回顶部
*/
totop() {
// 整个页面到顶部
// wx.pageScrollTo({
// duration: 1,
// scrollTop: 0,
// })
// scroll-view回到顶部
this.setData({
scrollTop:0
})
},
})
其他说明
使用过官方的ScrollViewContext.scrollTo(Object object),给scroll-view添加enhanced属性,也添加了id为scrollview,但是还是一直失败,有大神可帮忙看一下的话也不错,嘿嘿~~
<scroll-view id="scrollview" class="scroll-content" scroll-y enhanced>
</scroll-view>
wx.createSelectorQuery().select('#scrollview').node(function (res) {
console.log(res.node) // 节点对应的 Canvas 实例。
// res.node.scrollTo({
// top:0
// })
res.node.showScrollbar = false
}).exec((res) => {
const scrollView = res[0].node;
scrollView.scrollTo({
top: 0
})
})
更多推荐
已为社区贡献1条内容
所有评论(0)