如圖所示
HTML
滾動條
<scroll-view class="wrap" scroll-y='true' :scroll-top="scrollTop" @scroll="scroll" scroll-with-animation='true'>...</scroll-view>
返回頂部按鈕
<view class="to-top" @click="goTop">
<image src="../../../static/lesson/top.png" mode="widthFix"></image>
</view>
CSS
.to-top{
width: 70upx;
height: 70upx;
border-radius: 50%;
background-color: #4a81f6;
position: fixed;
right: 23upx;
bottom: 300upx;
z-index: 9999;
box-shadow: 0px 3px 5px 3px #93a2c1;
@include flex($content:center);
image{
width: 36upx;
height: auto;
}
}
JS
數據
data(){
return{
//滾動條位置
scrollTop:0, //
old: {
scrollTop: 0
}
}
}
返回頂部事件
/**
* 返回頂部
*/
//記錄滾動條位置
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
//記錄滾動條位置
goTop: function(e) {
this.scrollTop = this.old.scrollTop
//在數據變化後要執行的某個操作,而這個操作需要使用隨數據改變而改變的DOM結構的時候,這個操作都應該放進Vue.nextTick()的回調函數中。
this.$nextTick(function() {
this.scrollTop = 0
});
},