解决better-scroll滚动无效问题

  昨天在写一个移动端的横向滚动，引入cube-ui的cube-scroll，硬是不出来效果，后来还是自己的css有问题。要想引入得经过以下几个步骤：

一、安装cube-ui

npm install cube-ui --save

修改 package.json 并安装依赖：

...
  "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
    },
    <!--新增的部分开始-->
    "transformModules": {
        "cube-ui": {
            "transform": "cube-ui/lib/${member}",
            "kebabCase": true,
            "style": {
                "ignore": [
                    "create-api",
                    "better-scroll",
                    "locale"
                ]
            }
        }
    },
     <!--新增的部分结束-->
    "dependencies": {
        "cube-ui": "^1.12.5",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
    },
    ...
  //还有
   "devDependencies": {
    "webpack-transform-modules-plugin": "^0.3.5"
  }

添加webpack.base.conf.js 配置：

//引入模块
  const TransformModulesPlugin = require('webpack-transform-modules-plugin')
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'api': resolve('src/api'),
      'base': resolve('src/base'),
      'cube-ui': 'cube-ui/lib'
    }
  },
  plugins: [
    // ...
    new TransformModulesPlugin()
],

在index.js中引入使用：

import Vue from 'vue'
import Cube from 'cube-ui'
Vue.use(Cube)

二、html代码

<cube-scroll direction="horizontal" :data="playList"
    ref="scroll" class="horizontal-scroll-list-wrap">
    <ul class="list-wrapper" ref="songList">
    // 只显示5条
      <li v-for="(item, index) in playList.slice(0, 5)" 
      class="list-item" :key="index">
        <div class="icon">
          <img v-lazy="item.cover_url_big" alt="" width="90" height="90">
        div>
        <span v-html="item.title" class="title">span>
      li>
    ul>
  cube-scroll>

direction="horizontal"，意思是指定横向滚动。

三、css代码至关重要

   导致不滑动一般不是js的问题，因为js是人家写好的，要考虑的是自己的样式布局是不是影响到了横向滚动，而我自己的就是这个问题。
cube-ui文档上也强调：

2）横向滚动：内容元素的宽度必须大于容器元素。由于在默认情况下，子元素的宽度不会超过容器元素，所以需要给 Scroll 组件的 .cube-scroll-content 元素设置大于 .cube-scroll-wrapper 的宽度。

注意：任何时候如果出现无法滚动的情况，都应该首先查看内容元素.cube-scroll-content的元素高度/宽度是否大于容器元素.cube-scroll-wrapper的高度/宽度。这是内容能够滚动的前提条件。如果内容存在图片的情况，可能会出现 DOM 元素渲染时图片还未下载，因此内容元素的高度小于预期，出现滚动不正常的情况。此时你应该在图片加载完成后，比如 onload 事件回调中，手动调用 Scroll 组件的 refresh() 方法，它会重新计算滚动距离。 Scroll 相关常见问题可以查看 Cube-UI/Question-Answer.

	.horizontal-scroll-list-wrap
        display flex
        align-items: center
        .list-wrapper
          display flex
          justify-content center
          .list-item
            display inline-block
            padding 0 10px 10px 0
            .icon
              img
               border-radius 5px
            .title
              font-size 12px

  这些css样式一个不能少!