官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
scroll.wxml 代码
<view>开始</view>
<scroll-view scroll-y="true" bindscroll="scroll" scroll-with-animation="{{true}}" scroll-top="{{top}}">
<view>222222</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>111111</view>
<view>222222</view>
</scroll-view>
<view>结束</view>
<view class="{{now}} dingbu" bindtap="backTop">顶部</view>
scroll.wxss代码:
/* pages/scoroll/scoroll.wxss */
scroll-view{
height: 500rpx;
}
.dingbu{
position: fixed;
top: 540rpx;
right: 20rpx;
opacity: 0;
}
.now{
opacity: 1;
transition: all 2s;
}
scroll.js代码
// pages/scoroll/scoroll.js
Page({
/**
* 页面的初始数据
*/
data: {
top : 0,
now : ''
},
//点击返回顶部时触发
backTop(evt){
let top = this.data.top;
this.setData(
{
top
}
);
},
//scroll滚动时触发
scroll(evt){
//console.log(evt);
let scrollTop = evt.detail.scrollTop;
let now = scrollTop >= 100 ? 'now' : '';
this.setData({
scrollTop,
now
});
},
})
实现效果: