微信小程序 回到顶部按钮滚动到特定位置出现与点击回跳功能
作者:互联网
WXML:
<!-- 返回顶部悬浮 --> <view class="to_top_view" bindtap="toTop" hidden="{{!showToTop}}"> <image src="/resources/images/carBuying/to_top.png" mode="widthFix"></image> </view>
JS:
data: { showToTop: false }, /** * 方法区 */ // 点击回到顶部 toTop() { wx.pageScrollTo({ scrollTop: 0, duration: 500, }) }, /** * 用户滚动页面时 */ onPageScroll(e) { if (e.scrollTop > 780) { this.setData({ showToTop: true }) } else { this.setData({ showToTop: false }) } }
WXSS:
.to_top_view { display: flex; justify-content: center; align-items: center; position: fixed; right: 3%; bottom: 1%; width: 100rpx; height: 100rpx; z-index: 1; }
标签:false,center,showToTop,微信,100rpx,点击,按钮,scrollTop,setData 来源: https://www.cnblogs.com/magicg/p/16407592.html