vue工程 使用滚动组件 vue2-better-scroll 实现上拉加载 下拉刷新

vue2-better-scroll

关于具体安装&使用过程 请移步api文档 已经很详细了 而且超清晰明了。

https://cnpmjs.org/package/vue2-better-scroll

也正是因为太简洁了 所以有了这篇补充贴

因为我项目使用了双语 因此 api文档没有给出如何动态设置 在下拉刷新时候的语言切换属性。

zhPullDownRefreshObj 这个字段里的 txt 属性就是啦。

vue里面这样写 ⬇️⬇️

<vue-better-scroll class="wrapper"
                         ref="scroll"
                         :scrollbar="scrollbarObj"
                          :pullDownRefresh="$lang == 'en'? enPullDownRefreshObj : zhPullDownRefreshObj"
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                         @pullingDown="onPullingDown"
                         @pullingUp="onPullingUp">
        <ul class="list-content">
          <li class="list-item"
              v-for="item in items">{{item}}</li>
        </ul>
      </vue-better-scroll>

　data 里面这么设置 ⤵️⤵️

// 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
                zhPullDownRefreshObj: {
                    threshold: 90,
                    stop: 40,
                    txt: '刷新成功'
                },
                enPullDownRefreshObj: {
                    threshold: 90,
                    stop: 40,
                    txt: 'Refresh successfully'
                }