今天在做小程序实现按钮返回至顶部时,总是不生效,查询了文档发现是scoller-top的值若两次都设为相同时置顶效果不能生效,在此,自己写了一个scoller-view至顶的功能
主要代码如下:
页面:
<scroll-view
scroll-y
style="height: 75vh;"
bindscroll="scroll"
bindscrolltolower="scrolltolower"
scroll-top="{{topNum}}"
>
<image
bindtap="scrollTop"
wx:if="{{floorstatus}}"
class="scroll-top"
src="../../images/details_Return top_icon@2xpng.png"
/>
</scroll-view>
样式:
<style>
.scroll-top {
position: fixed;
bottom: 15%;
right: 0;
height: 4rem;
width: 4rem;
}
</style>
逻辑:
<script>
data = {
topNum: -1,
floorstatus:false,
}
methods:{
scroll(e) {
if (e.detail.scrollTop > 300) {
this.topNum = -1; // 是两次topNum不一致
this.floorstatus = true;
} else {
this.floorstatus = false;
}
},
scrollTop(e) {
this.topNum = 0;
}
}
</script>
效果如下: