**
## [ 大图片压缩]
**
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
});
},