下載 better-scroll

npm install better-scroll --save

注意：

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

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

一、 垂直滾動
在組件模板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>

在組件鉤子函數methods中定義方法

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

在組件的CSS中（stylus 語法）

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

二、 水平滾動
在組件模板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>

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

<script> export default {data() {return {goods: []}},methods: {initScroll() {// 給內層盒子設置寬度，不設置寬度的話無法滾動let width = this.goods.length * 60// 如果有外邊距，可以這樣寫。需要去掉最后一個元素的外邊距，在后面減一下// 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, // 配置允許點擊事件scrollX: true, // 開啟橫向滾動eventPassthrough: 'vertical' // 當設置 eventPassthrough 為 'vertical' 的時候，scrollY 無效})} else {this.Scroll.refresh() // 重新計算 better-scroll，當 DOM 結構發生變化的時確保滾動效果正常}})}},mounted() {this.initScroll()} } </script>

在組件的CSS中（stylus 語法）

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

better-scroll

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。