下載 better-scroll

npm install better-scroll --save

注意：

• 必須包含兩個(gè)大的div，外層和內(nèi)層div
• 外層div設(shè)置可視的大小(寬或者高)-有限制寬或高
• 內(nèi)層div，包裹整個(gè)可以滾動(dòng)的部分
• 內(nèi)層div高度一定大于外層div的寬或高(寬度大于外層是水平滾動(dòng), 高度大于外層是垂直滾動(dòng))，才能滾動(dòng)
• 必須在獲取數(shù)據(jù)和DOM渲染完之后再調(diào)用定義的 initScroll()方法，否則無法滾動(dòng)
  在組件script標(biāo)簽中引入

<script> import BScroll from 'better-scroll' export default {data() {return {goods: []}} } </script>

一、 垂直滾動(dòng)
在組件模板template中布局

<template><div class="wrapper" ref="wrapper"><ul><li v-for="item in goods" class="item"><span class="text">{{item.name}}</span></li></ul></div> </template>

在組件鉤子函數(shù)methods中定義方法

<script> export default {data() {return {goods: []}},methods: {initScroll() {this.$nextTick(()=>{if(!this.Scroll) {this.Scroll = new BScroll(this.$refs.wrapper,{click: true, // 配置允許點(diǎn)擊事件scrollY: true // 開啟縱向滾動(dòng)})} else {this.Scroll.refresh() // 重新計(jì)算 better-scroll，當(dāng) DOM 結(jié)構(gòu)發(fā)生變化的時(shí)確保滾動(dòng)效果正常}})}},mounted() {this.initScroll()} } </script>

在組件的CSS中（stylus 語法）

<style lang="stylus" scoped> .wrapperwidth 100%position absolutetop 0bottom 0overflow hidden </style>

二、 水平滾動(dòng)
在組件模板template中布局

<template><div class="wrapper" ref="wrapper"><ul ref="content" class='content'><li v-for="item in goods" class="item"><span class="text">{{item.name}}</span></li></ul></div> </template>

在組件鉤子函數(shù)methods中定義方法（略有不同）

<script> export default {data() {return {goods: []}},methods: {initScroll() {// 給內(nèi)層盒子設(shè)置寬度，不設(shè)置寬度的話無法滾動(dòng)let width = this.goods.length * 60// 如果有外邊距，可以這樣寫。需要去掉最后一個(gè)元素的外邊距，在后面減一下// let width = this.goodslength * (60 + 10) - 10this.$refs.content.style.width = width + 'px'this.$nextTick(()=>{if(!this.Scroll) {this.Scroll = new BScroll(this.$refs.wrapper,{click: true, // 配置允許點(diǎn)擊事件scrollX: true, // 開啟橫向滾動(dòng)eventPassthrough: 'vertical' // 當(dāng)設(shè)置 eventPassthrough 為 'vertical' 的時(shí)候，scrollY 無效})} else {this.Scroll.refresh() // 重新計(jì)算 better-scroll，當(dāng) DOM 結(jié)構(gòu)發(fā)生變化的時(shí)確保滾動(dòng)效果正常}})}},mounted() {this.initScroll()} } </script>

在組件的CSS中（stylus 語法）

<style lang="stylus" scoped> .wrapperwidth 100%overflow hidden.contentwhite-space nowrap.itemfloat leftwidth 60px </style>

better-scroll

總結(jié)

以上是生活随笔為你收集整理的vue中使用better-scroll实现滑动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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