html scroll无效,解决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 代码

ref="scroll" class="horizontal-scroll-list-wrap">

// 只显示5条

class="list-item" :key="index">

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 样式一个不能少!