微信小程序scroll-view滚动到顶部-我爱编程

当前位置：: 首页; 文章; 前端
详情

微信小程序scroll-view滚动到顶部

前端
三生万物
0

官方说明：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

视图

<scroll-view scroll-y="true" scroll-top="{{scrollTop}}" scroll-with-animation="true">
    <view>
        <!-- ... -->
    </view>
</scroll-view>
<view bindtap="handleScrollTop"><text></text></view>

如上所示，scroll-view组件只做了垂直滚动，所以这里要开启scroll-y，如果要加上过渡动画的话就需加上scroll-with-animation，至于返回顶部则需要动态设置scroll-top属性值，脚本代码如下：

Page({
  data: {
    scrollTop: 0    
  },
  // 滚动到顶部
  handleScrollTop() {
    this.setData({
      scrollTop: 0 
    });
  }
})

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。