主页（六）-控制页面回到顶部——点击返回顶部按钮-e.scrollTop

回到顶部——点击返回顶部按钮-e.scrollTop

按钮样式 <!-- 回到顶部 --> <div class="top"> ︿ <p>顶部</p> </div> .top { position: fixed; bottom: 50rpx; right: 50rpx; border-radius: 50rpx; width: 100rpx; height: 100rpx; background-color: #fff; text-align: center; font-size: 14px; display: none; } 回到顶部功能实现 toTopHandle () { // 控制回到顶部 mpvue.pageScrollTo({ scrollTop: 0 }) } onPageScroll (event) { // 小程序生命周期函数，监控页面的滚动 // 如果滚动指定大小，那么就控制显示或隐藏 this.isShow = event.scrollTop > 50 }

实例

在home/index.vue中,

结构

<!-- 回到顶部 --> <div class="totop" v-if='isShow' @click='handleTop'> ︿ <p>顶部</p> </div>

样式

.totop { position: fixed; bottom: 50rpx; right: 50rpx; border-radius: 50rpx; width: 100rpx; height: 100rpx; background: rgb(255, 255, 255, 0.5); text-align: center; font-size: 14px; //默认是隐藏的 // display:none }

数据和逻辑

export default { data () { return { // 控制回到顶部按钮的显示与否 isShow: false } }, onPageScroll (e) { // 监听页面的滚动 // console.log(e.scrollTop) 显示具体数值 this.isShow = e.scrollTop > 100 }, methods: { handleTop () { // 控制页面 点击返回按钮 回到顶部 wx.pageScrollTo({ scrollTop: 0 }) }, } }

显示效果