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'

                }