是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等)，没有滚动条显示却实现了滚动功能。
1.2 better-scroll安装
npm install better-scroll --save 安装至项目中
1.3 better-scroll使用
better-scroll常见应用场景(列表滚动)的html结构：
<div> <ul> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM，但不会影响滚动 --> </div>
备注：better-scroll是作用在外层wrapper容器上的，滚动的部分是content元素。并且better-scroll只处理容器(wrapper)的第一个子元素(content)的滚动，其他的元素都会被忽略。
better-scroll初始化代码：
better-scroll提供了一个类，实例化的第一个参数是一个原生的DOM对象，如果不是传递的对象，而是传递的字符串(类名或者id)，better-scroll内部会尝试调用querySelector去获取这个DOM对象。
<->直接传递DOM对象
import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper)
<二>传递字符串，使better-scroll内部去获取DOM对象
import BScroll from 'better-scroll' let scroll = new BScroll('.wrapper')
2. 代码
2.1 代码示例
2.1 子组件scrollChild(横向滚动组件)
<template> <div> <div ref='tabsWrapper'> <ul ref='tab'> <li v-for='(item, index) in tabs' :key='index'> <div> <div> {{item.name||'无'}} </div> </div> </li> </ul> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { props: { data: Array, }, data() { return { tabs: [], mX: 0, tabWidth: 300, } }, mounted() { this.$nextTick(() => { console.log(this.data) this.tabs = this.data this._initMenu() }) }, methods: { _initMenu() { const tabsWidth = this.tabWidth const width = this.tabs.length * tabsWidth this.$refs.tab.style.width = `${width}px` this.$nextTick(() => { if (!this.scroll) { this.scroll = new BScroll(this.$refs.tabsWrapper, { scrollX: true, eventPassthrough: 'vertical', }) } else { this.scroll.refresh() } }) }, }, } </script> <style scoped> .move-tabs { position: relative; top: 0; bottom: 0; width: 100%; } .tabs-wrapper { height: 120px; width: 100%; box-sizing: border-box; overflow: hidden; white-space: nowrap; } .tab-item { float: left; width: 280px; height: 120px; padding: 10px; margin-right: 20px; background: #f5f5; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); border-radius: 4px; } .expand-block { font-size: 30px; font-weight: bold; color: #333333; } </style>
2.1 父组件scrollParent(调用子组件)
<template> <div> <child-scroll :data='scrollList' /> </div> </template> <script> import ChildScroll from '../components/scrollChild' export default { name: "scrollParent.vue", components: { ChildScroll, }, data(){ return { scrollList:[ {name:'北京'}, {name:'上海'}, {name:'杭州'}, {name:'广州'}, {name:'郑州'}, {name:'深圳'}, {name:'合肥'}, {name:'徐州'}, {name:'西安'}, {name:'石家庄'}, {name:'呼和浩特'}, {name:'兰州'}, {name:'包头'}, {name:'重庆'}, ] } }, } </script> <style scoped> </style>
2.2 结果展示
可左右滑动出所需要展示的列表集合
