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