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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值