微信小程序回到顶部，点击滚动到顶部简单易懂！

前端贾公子

于 2024-09-27 18:06:30 发布

阅读量277

点赞数 8

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/qq_63358859/article/details/142599570

版权

使用scroll-view的情况

未使用scroll-view的情况

实战应用（仅放置重要代码）：

使用scroll-view的情况

// HTML
<view bindtap="toTop">回到顶部</view>
<scroll-view class="scroll_view" scroll-top="{{topNum}}" scroll-y >
内容
</scroll-view>

// js
page({
	data: {
		topNum : 0
	},
	toTop() { // 回到顶部
        this.setData({
            topNum:0
        })
    },
})

未使用scroll-view的情况

// html
<view bindtap="toTop">回到顶部</view>
<view>内容</view>
//js
page({
	toTop(){
		wx.pageScrollTo({
		    scrollTop: 0
		})
	},
})

实战应用（仅放置重要代码）：

在.wxml文件中，添加scroll-top，并使用model双向绑定

<scroll-view class="scroll-content" scroll-y  model:scroll-top="{{myScrollTop}}" >
   ...内容
</scroll-view>
<!-- 回到顶部的图标，含有bindtap或catchtap事件 -->
<text catchtap="totop" class="fa fa-chevron-up primary-color"></text>

在.js文件中，添加myScrollTop变量，并在totop事件中修改myScrollTop

Page({
  /**
   * 组件的初始数据
   */
  data: {
    // 竖向滚动条位置
    scrollTop: 0,
  },
  /**
   * 返回顶部 
   */
  totop() {
    // 整个页面到顶部
    // wx.pageScrollTo({
    //   duration: 1,
    //   scrollTop: 0,
    // })
    // scroll-view回到顶部
    this.setData({
      scrollTop:0
    })
  },
})