js:
data: {
top:0,
now:"hid"
},
// 去底部
goto(){
this.setData({top:0})
},
// 到底部了
down(evt){
// console.log(evt);
let now =evt.detail.scrollTop>=100?"show":"hid"
this.setData({now:"now"})
},
页面渲染:
<view >乱七八糟</view>
<image src="/img/2.png" /><text >肉松南瓜小贝</text>
<scroll-view class="contain" scroll-y="{{true}}" scroll-top="{{top}}" bindscrolltolower="down">
<view >
开头放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放
假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假
放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放
假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假
放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放
假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假放假
结尾
</view>
</scroll-view>
<view bindtap="goto" class="{{now}}">到顶部</view>
<button open-type="share" plain="{{false}}"><image src="/img/return.png" class="img"/></button>
.contain{
width: 100%;
height: 500rpx;
}
.hid{
opacity: 0;
}
.show{
opacity: 1;
transition: all 2s;
}
.img{
width: 50rpx;
height: 50rpx;
opacity: 50%;
}
image{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}