微信小程序scroll-view滚动到顶部丨技术开发分享录

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

%{ detail.nickname }

转载翻译 %{ formatTime(detail.create_time) } 字数 %{ detail.content && detail.content.length } 阅读 %{ detail.read_num } 评论 %{ comment.page.total } 喜欢 %{ total(detail.like_uids) } %{ formatTag(v) } 编辑文章

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

视图

<scroll-view scroll-y="true" scroll-top="{{scrollTop}}" scroll-with-animation="true" class="list">
    <view class="item">
        <!-- ... -->
    </view>
</scroll-view>
<view class="backtop" bindtap="handleScrollTop"><text class="iconfont icon-backtop"></text></view>

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

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

PS：写作不易，如要转裁，请标明转载出处。

%{ comment.page.total }条评论

%{ v }

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

猜你想看