vue使用better-scroll實現橫向滾動的方法實例
一、滾動的實現原理
better-scroll的滾動原理和瀏覽器原生滾動原理是一樣的,當子盒子的高度大於父盒子的高度,就會出現縱向滾動;同理,如果子盒子的寬度大於父盒子的寬度,那麼就會出現橫向滾動。
二、better-scroll的 html 結構
先來看一下 better-scroll 常見的 html 結構:
<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div>
BetterScroll應用於外部wrapper容器,並且滾動部分是content。請註意,wrapper默認情況下,BetterScroll處理容器()的第一個子元素(內容)的滾動,這意味著其他元素將被忽略。
三、在Vue中使用better-scroll
npm install better-scroll --save //npm 安裝 import BScroll from 'better-scroll' //組件文件中引入better-scroll
<template> /* 橫向滾動 */ /* 這裡是父盒子*/ <div class="wrapper_box" style="min-height:100vh; " ref="wrapper" v-else > /* 這裡是子盒子,即滾動區域*/ <div class="content" ref="wrapperChild"> <div v-for="(item, index) in currentImgList" :key="index" class="imgItem" > <img :src="item.img" class="img" style="margin: 0 10px;" /> </div> </div> </div> </template> <script> import BScroll from "better-scroll"; export default { data() { return { currentImgList: [ { img: require("../../assets/image/zzb_1.png") }, { img: require("../../assets/image/zzb_2.png") }, { img: require("../../assets/image/zzb_3.png") } ], }; }, mounted() { this.slide_x(); //橫向滾動 }, methods: { // 初始化 _initScroll() { if (!this.scroll) { this.scroll = new BScroll(this.$refs.wrapper, { // 實例化BScroll接受兩個參數,第一個為父盒子的dom節點 startX: 0, /// 配置的詳細信息請參考better-scroll的官方文檔,這裡不再贅述 click: true, scrollX: true, scrollY: false, // 忽略豎直方向的滾動 eventPassthrough: "vertical", useTransition: false // 防止快速滑動觸發的異常回彈 }); } else { this.scroll.refresh(); //如果dom結構發生改變調用該方法重新計算來確保滾動效果的正常 } }, // 計算寬度 _calculateWidth() { // 獲取類名為 imgItem 的標簽 let rampageList = this.$refs.wrapperChild.getElementsByClassName( "imgItem" ); // 設置一個起始寬度 let initWidth = 0; // 遍歷標簽 for (let i = 0; i < rampageList.length; i++) { const item = rampageList[i]; // 將每一個標簽寬度相加 initWidth += item.clientWidth; } // 設置可滾動的寬度 this.$refs.wrapperChild.style.width = `${initWidth}px`; }, slide_x() { this.$nextTick(() => { //this.$nextTick 是一個異步函數,為瞭確保 DOM 已經渲染完畢 this._initScroll(); // 初始化 this._calculateWidth(); // 計算寬度 }); }, }, }; </script>
下面是插件原作者說的:
四. 容易出現問題的點:
- 必須等到頁面DOM渲染完成再去執行BScroll的實例化,建議在mounted 鉤子函數裡執行
- 子盒子的寬度大於父盒子的寬度
最後
better-scroll插件作者的文章,發現better-scroll真強大啊!
當 better-scroll 遇見 Vue
在Vue中用better-scroll實現橫向滾動
到此這篇關於vue使用better-scroll實現橫向滾動的文章就介紹到這瞭,更多相關vue better-scroll實現橫向滾動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 關於better-scroll插件的無法滑動bug(2021通過插件解決)
- 一款好用的移動端滾動插件BetterScroll
- Vue中利用better-scroll組件實現橫向滾動功能
- 淺談VUE uni-app 基礎組件
- 結合康熙選秀講解vue虛擬列表實現