直接上源碼：

組件：scroll.vue，需要先npm install better-scroll

<template><div ref="wrapper"><slot></slot></div> </template><script type="text/ecmascript-6">import BScroll from 'better-scroll'const DIRECTION_H = 'horizontal'const DIRECTION_V = 'vertical'export default {props: {probeType: {type: Number,default: 1},click: {type: Boolean,default: false},listenScroll: {type: Boolean,default: false},data: {type: Array,default: null},pullup: {type: Boolean,default: false},beforeScroll: {type: Boolean,default: false},refreshDelay: {type: Number,default: 20},direction: {type: String,default: DIRECTION_V}},mounted() {setTimeout(() => {this._initScroll()}, 20)},methods: {_initScroll() {if (!this.$refs.wrapper) {return}this.scroll = new BScroll(this.$refs.wrapper, {probeType: this.probeType,click: this.click,eventPassthrough: this.direction === DIRECTION_V ? DIRECTION_H : DIRECTION_V})if (this.listenScroll) {this.scroll.on('scroll', (pos) => {this.$emit('scroll', pos)})}if (this.pullup) {this.scroll.on('scrollEnd', () => {if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {this.$emit('scrollToEnd')}})}if (this.beforeScroll) {this.scroll.on('beforeScrollStart', () => {this.$emit('beforeScroll')})}},disable() {this.scroll && this.scroll.disable()},enable() {this.scroll && this.scroll.enable()},refresh() {this.scroll && this.scroll.refresh()},scrollTo() {this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)},scrollToElement() {this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)}},watch: {data() {setTimeout(() => {this.refresh()}, this.refreshDelay)}}} </script><style scoped lang="stylus" rel="stylesheet/stylus"></style>
應(yīng)用方法：

引入并注冊組件：

import Scroll from 'base/scroll/scroll'export default {components: {Scroll}}
template結(jié)構(gòu)以及style：

效果：圖中輪播圖+列表為滾動區(qū)域（recommend-content），即需要滾動的內(nèi)容；對應(yīng)的class：slider為輪播圖，recommend-list為列表。由于輪播圖數(shù)據(jù)以及l(fā)ist數(shù)據(jù)為動態(tài)獲取，實際使用請?zhí)畛淠愕臄?shù)據(jù)，以上只給出關(guān)鍵結(jié)構(gòu)。

已實現(xiàn)滾動：

總結(jié)

以上是生活随笔為你收集整理的基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。