better scroll 为什么没有滚动效果？

Question

题目描述

查看了 Better-Scroll，写了一个小的示例。
但是该示例无法达到滚动效果，.content 子容器也没有加载滚动样式。

代码思路：

1. 父容器 .wrapper 高度设置为 400px, 该父容器下面只有一个 .content 子容器
2. 子容器由 10 个 li 标签组成
3. 使用 this.$nextTick 方式插入 滚动代码

相关代码

<template>
    <div class="wrapper">
        <ul class="content">
            <li v-for="(item, index) in 10" class="item">{{index}}</li>
        </ul>
    </div>
</template>

<script>
    import BScroll from '@better-scroll/core'
    export default {
        name: 'app',
        created() {
            this.$nextTick(() => {
                this.scroll = new BScroll('.wrapper', {
                });
                console.log(this.scroll)
            })
        },
    }

</script>

<style rel="stylesheet">
    .wrapper {
        height: 400px;
        overflow: hidden;
    }
    .item {
        list-style: none;
        height: 100px;
    }

</style>

你期待的结果是什么？

在 chrome 浏览器中使用 iPhone6 显示代码效果，希望内容可以有滚动的效果。
还请告知以上代码为什么没有达到滚动效果。

Answer 1

看一下这个，会不会对你有启发vue better-scroll 遇到的坑

Answer 2

在 mounted 周期中初始化滚动。created 的时候，只是创建了 数据监听和添加事件回调，还没有渲染页面呢