和 Vue 一起的坑

[hcysunyang]

和 Vue 一起的坑

[zaxlct]

我也遇到了同样的问题，被你抢先发了 issues ...

DOM 已经更新完毕，再启动 imulationScrollY 页面没法往下滚，不过可以弹性滚动

[zaxlct]

@GreatAuk
如果你只用上下滚动加载的话可以试试这个库 better-scroll，和 Vue 封装好的。

不过我觉得 finger-mover 更强大，坐等作者回复，哈哈。

[GreatAuk]

@zaxlct 掘金过来的？作者去better-scroll 作者的博客下打广告了。我也觉得 finger-mover 更强大，文档也很 nice

[zaxlct]

@HcySunYang 对，文档很好。
我在 V2EX 和 掘金上都看到了，哈哈
维护一个开源项目不容易，看看能不能发个 PR 啥的

[HcySunYang]

@GreatAuk @zaxlct 刚看到你们的问题，准备去复现一下，感谢大家对框架的支持

[zaxlct]

移动网站的长列表，好多都是网页加载完之后，再通过 ajax 异步获取数据填充列表的。
这一点文档里没有针对的说明。

然后「酒香也怕巷子深」，我建议项目可以写个简单的 Vue demo 或者 React demo，这样能吸引更多的人来使用和维护。

等这个 BUG 修复了，我们也可以发个 PR 补充个 demo 什么的，哈哈。

[HcySunYang]

@GreatAuk
针对这个issues，以及你的代码，可以像如下代码这样去解决：

   export default{
        data () {
            return {
                fm: null
            }
        },
        methods: {
            init () {
                this.fm = new Fmover({
                    el: '.result-wrap',
                    plugins: [imulationScrollY()]
                })
            }
        },
        mounted(){
            // 模拟发送网络请求
            setTimeout(() => {
                // 数据赋值
                // ...

                // 请求成功后，刷新一下列表的尺寸就可以了
                this.$nextTick(()=>{
                    this.fm[0].refreshSize()
                })
            }, 1000)
            
            this.init()
        }
    }

问题在于，数据更新之后，没有刷新可滚动元素的尺寸，导致滑动不上去。后面会着手封装成为Vue的组件。

demo请查看：https://github.com/HcySunYang/finger-mover/blob/dev/demo/vue/simulation-y-demo.html

另外欢迎 @zaxlct 提交关于Vue的demo，我这边已经着手开发左滑删除，拖动排序，图片查看器等插件了。finger-mover还有很大的提升空间，最后再次感谢大家。

[zaxlct]

@GreatAuk
好像不行，Chrome 调试打开网页能滚动，但滚动到底部不会打印 123
用手机打开，还是没法往下滚动，不过能弹性滚动。

export default {
    data() {
      return {
        fm: null,
      }
    },

    mounted() {
      // 模拟发送网络请求
      setTimeout(() => {
        // 数据赋值
        // ...
        this.$nextTick(()=>{
          this.fm[0].refreshSize()
        })
      }, 1000)

      this.initScroll()
    },

    methods: {
      initScroll() {
        this.fm = new Fmover({
          el: '#scroll_box',
          plugins: [
            simulationScrollY({
              distance: 0,
              onLoadMore() {
                console.log(123)
              }
            })
          ]
        })
      }
    }
  }

[GreatAuk]

@zaxlct 恩，我试了下也触发不了onLoadMore事件

[GreatAuk]

@HcySunYang 试下打开 Demo,检查元素找到 #scroll-box元素后 Edit as HTML ，在里面添加一个链接 <a href="http://www.baidu.com" ">百度</a>。我发现点击不会跳转，给这个标签定义点击事件也触发不了。

[HcySunYang]

@GreatAuk @zaxlct
参数应该写在 loadMore 里面：

simulationScrollY({
    loadMore: {
        distance: 0,
        onLoadMore: function () {
            console.log('fire')
            
            this.loadEnd()
        }
    }
})

然后在这个过程中，发现了loadMore触发很多次的问题并进行修复，发布了一个小版本1.1.4。可以查看 release，例子点击这里：https://github.com/HcySunYang/finger-mover/blob/dev/demo/vue/simulation-y-demo.html

另外 @zaxlct 你所说的手机中的问题应该是缓存。
@GreatAuk 点击的问题天亮了我再看一下，是什么原因引起的，Good night

[HcySunYang]

@GreatAuk 安装最新的 1.1.5 应该就没有链接不可点击的问题了:https://github.com/HcySunYang/finger-mover/releases/tag/1.1.5

[zaxlct]

更新了 1.1.5 ，换了新的浏览器测试，那两个问题还是存在。

1. PC 打开网页，移动调试，模拟滚动到底部不会触发 loadMore
2. 手机打开网页，没法往下滚动，只能强制往下弹性滚动

<div id="box">
    <div id="scroll-box">
        <div class="content">
            <p v-for="xxx">{{xxx}}</p>
        </div>
    </div>
</div>

export default {
  data() {
    return {
      shopList: [], // 列表数据
      fm: null,
    }
  },

  mounted() {
    this.initScroll()
    this.fetchShopList()
  },

  methods: {
    fetchShopList() {
      // 异步获取列表数据
      AJAX.GET().then(data => {
        if (data) {
          this.shopList = data
          this.$nextTick(() => {
            this.fm[0].refreshSize()
          })
        }
      })
    },

    initScroll() {
      this.fm = new Fmover({
        el: '#scroll-box',
        plugins: [
          simulationScrollY({
            loadMore: {
              distance: 0,
              onLoadMore: function () {
                console.log('fire')
                this.loadEnd()
              }
            }
          })
        ]
      })
    }
  },
}

@GreatAuk 你的网页现在能往下滚动吗
@HcySunYang 我去试试你写的那个 demo，也许是我的代码有问题

[zaxlct]

我给 #scroll-box 的父节点#box加点 demo 里的样式就解决了😓

#box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

然后能不能得出结论，纵向模拟滚动时，必须得给滚动容器的父节点加这些样式？

[GreatAuk]

做了个 LoadMore 的小 Demo
@zaxlct 试了下，好像必须给滚动容器的父节点加这些样式加这些样式才行啊

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>LoadMore</title>
    <style>
    #app {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .list-item {
        display: flex;
        color: #888;
        padding-bottom: 15px;
        margin: 10px 10px;
        border-bottom: 1px solid #ccc;
        text-decoration: none;
    }

    .title {
        flex: 1;
    }

    .floor {
        color: #333;
        margin-right: 10;
    }

    .loading {
        display: block;
        text-align: center;
        background:blue;
        color: red;
        line-height: 60px;
        margin-top:-80px;
        position:relative;
        z-index:1000;
    }

    [v-cloak] {
        display: none;
    }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak id="scroll-box">
            <a v-for="(item, index) in list" :href="item.url" class="list-item">
                <span class="floor">{{index+1}} . </span>
                <span class="title">{{item.title}}</span>
            </a>
            <span v-show="loading" class="loading">Loading</span>
        </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/finger-mover/dist/finger-mover.js"></script>
    <script src="./node_modules/simulation-scroll-y/dist/simulation-scroll-y.js"></script>
    <script>
    const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';
    new Vue({
        el: '#app',
        data: {
            list: [],
            fm: null,
            loading: false  //控制loading 的显示
        },
        methods: {
            initScroll: function() {
                //that 指向 vue 实例，防止与 onLoadMore 中的 this 冲突
                let that = this;
                this.fm = new Fmover({
                    el: '#scroll-box',
                    plugins: [
                        simulationScrollY({
                            loadMore: {
                                distance: 200,
                                onLoadMore: function() {
                                    that.loading = true;
                                    axios({
                                        method: 'get',
                                        url: api,
                                        params: {
                                            page: that.list.length / 20 + 1
                                        },
                                    }).then((res) => {
                                        that.list = that.list.concat(res.data.hits);
                                        that.$nextTick(()=>{
                                            that.loading=false;
                                            console.log("LoadEnd")
                                            this.loadEnd();
                                        });
                                    }).catch((err) => {
                                        console.log(err);
                                    })
                                }
                            }
                        })
                    ]
                })
            }
        },
        mounted() {
            this.initScroll();
            axios({
                method: 'get',
                url: api,
            }).then((res) => {
                this.list = res.data.hits;
                this.$nextTick(() => {
                    //第一次 dom 渲染成功后重新计算滚动元素的尺寸
                    this.fm[0].refreshSize();
                });
            }).catch((err) => {
                console.log(err);
            })
        }
    })
    </script>
</body>

</html>

[zaxlct]

@GreatAuk 可以封装成一个组件

[HcySunYang]

@GreatAuk @zaxlct 你们说的父级必须用我demo中的样式才好使。但其实不用那样也行，只要保证父级是一个包裹层就行，如果父级的高度和可滚动元素一样高，那就相当于包裹层和可滚动元素一样高，当然就滚动不了了。这么做的好处是：用户可以自己设置父级的任何样式，插件只帮你管理可滚动的元素。

[zaxlct]

@GreatAuk
demo 代码有个建议

data() {
  fm: null, // 在这里设置 fm，fm 发生变化 Vue 会监听这个变化刷新 DOM
},
created() {
  this.fm = null //建议在这里初始化 fm
}

[HcySunYang]

我要关掉这个issue喽

[GreatAuk]

@HcySunYang 谢谢大大