当 better-scroll 遇见 Vue about ddfe-blog HOT 13 OPEN

mark

from ddfe-blog.

谢谢作者对better-scroll结合vue做的剖析，之前模仿饿了么项目的时候用到该插件，一直不明白为什么要在this.$nextTick里面去初始化better-scroll。。现在算是懂了。。。

from ddfe-blog.

我在想，用全局 directive 实现是不是更简洁呢？毕竟 html 里面本来没有 scroll view 这种概念，所有 block level elements 本身都可以通过 overflow 样式来控制是否能够 scroll，如果实现一个 boolean 值的全局 directive 来控制是否在某个元素上面启用 better-scroll 似乎更加自然一些，使用者只需要一个属性就能工作。实现这个 directive 的时候可以考虑监听 component updated 来自动异步 refresh，这样对使用者就更加没有负担了。

from ddfe-blog.

@huandu 欢总来评论了，倍感荣幸。其实我认为不管是 directive 还是 component，都是一个语法糖，本质上还是对 better-scroll 做了一层封装。从易用性上讲，2者差别不大（组件的话也就是把 div 标签换成了 scroll 标签）。从传参方面，指令的传参看上去很蹩脚，而组件通过 props 来控制 scroll 组件的能力，似乎更 make sense 喔。还有一点，组件可以暴露一些方法给外部调用，也就是父组件可以通过调用子组件方法来控制它的行为，这点指令似乎不好搞吧~

from ddfe-blog.

better-scroll配合sortable使用会出现拖拽元素阴影错位的情况，问题发生在better-scroll在初始化后。拖拽使用了vuedraggable

from ddfe-blog.

这个做下拉刷新怎么让顶部先弹回去呢，等到请求数据的时候再弹下来显示加载动画

from ddfe-blog.

@rainwalkerhu 参考最新的 demo 吧
https://ustbhuangyi.github.io/better-scroll/demo/#/vertical-scroll

from ddfe-blog.

        // 是否派发顶部下拉事件，用于下拉刷新
        if (this.pulldown) {
          this.scroll.on('touchend', (pos) => {
            // 下拉动作
            if (pos.y > 50) {
              this.$emit('pulldown')
            }
          })
        }

忽略。。。 touchend -> touchEnd

from ddfe-blog.

666，感谢分享干货，已推荐到 SegmentFault 头条 (๑•̀ㅂ•́)و✧
链接如下：https://segmentfault.com/p/1210000011520834

from ddfe-blog.

请问 slot 插槽 里面scrollToElement scrollTo的方法怎么调用？都是需要通过在父组件里面绑定一个值，然后在子组件里面添加watch方法去监听，然后调用么？

from ddfe-blog.

@mcfly001 , 可以参考 https://github.com/ustbhuangyi/better-scroll/blob/master/example/components/scroll/scroll.vue

from ddfe-blog.

谢谢， 这插件功能确实很强大，打算把vue-swiper分页也换过来了

from ddfe-blog.

v-show 的时候滚动无效，然后我监听了控制显示隐藏的字段，在里面进行刷新，但还是不能滚动！

from ddfe-blog.