本文实例为大家分享了vue滚动插件better-scroll的具体代码，供大家参考，具体内容如下

1. 概述

1.1 说明

better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等)，没有滚动条显示却实现了滚动功能。

1.2 better-scroll安装

npm install better-scroll --save 安装至项目中

1.3 better-scroll使用

better-scroll常见应用场景(列表滚动)的html结构：

<div class="wrapper"> <ul class="content"> <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 class='move-tabs'> <div class='tabs-wrapper' ref='tabsWrapper'> <ul ref='tab'> <li v-for='(item, index) in tabs' :key='index'> <div class='tab-item'> <div class='expand-block'> {{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 结果展示

可左右滑动出所需要展示的列表集合

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。