解決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樣式一個不能少!