昨天在写一个移动端的横向滚动,引入 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 样式一个不能少!


标题:解决better-scroll滚动无效问题
作者:JaneChelle
地址:https://xiao.algerfan.cn/articles/2019/10/25/1572014286748.html