Vue中使用better-scroll實現輪播圖組件

better-scroll 是什么

better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。

better-scroll 是基于原生 JS 實現的，不依賴任何框架。它編譯后的代碼大小是 63kb，壓縮后是 35kb，gzip 后僅有 9kb，是一款非常輕量的 JS lib。

今天我們利用它實現一個橫向滾動——輪播圖組件。演示如下：

首先來整理一下需求：

• 能夠根據異步請求到的圖片數據進行輪播圖展示。
• 能夠控制它是否自動播放，是否循環播放，自動播放間隔。
• 能夠提示當前播放頁。

Mock數據

由于是一個demo，從網上找了幾張圖片寫成json格式，數據用于模擬接口數據。這里用到了mock.js。Axios。安裝方法如下：

npm install mockjs

npm install --save axios vue-axios

axios使用方法不多贅述，簡述一下mock數據。在mock文件夾下新建json文件夾放置json數據文件。新建index.js導出接口。就可以使用axios請求接口了。

1. [
2. "https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png",
3. "https://img1.mukewang.com/szimg/5d9c62fb0907ccf012000676-360-202.png",
4. "https://img3.mukewang.com/5aeecb1d0001e5ea06000338-360-202.jpg"
5. ]

1. const Mock = require('mockjs')
2.  
3. Mock.mock('/slider', 'get', require('./json/slider.json'))

基礎組件：slider.vue

將輪播圖組件抽象出來，接收isLoop、isAutoPlay、interval屬性控制輪播圖。從mounted方法調用順序可以知道思路是

• setSliderWidth()中先獲取再設置顯示層和圖片包裹層高度。
• initDots()根據圖片包裹層子元素的個數設置數組放置圓點。
• initSlider()初始化better-scroll。
• autoPlay()設置自動播放。

1. <template>
2. <div class="slider-apply" ref="slider"> <!-- 顯示層 -->
3. <div class="slider-group" ref="group"> <!-- 所有圖片包裹層 -->
4. <slot></slot> <!-- 插槽顯示圖片內容 -->
5. </div>
6. <div class="dots"> <!-- 提示圓點 -->
7. <div class="dot" v-for="(item, index) in dots" :key="index":class="currentIndex===index?'active':''"></div>
8. </div>
9. </div>
10. </template>
11.  
12. <script type='text/ecmascript-6'>
13. import BScroll from 'better-scroll'
14. export default {
15. data () {
16. return {
17. dots: [],
18. currentIndex: 0 /* 當前頁下標 */
19. }
20. },
21. props: {
22. isLoop: { /* 循環播放 */
23. type: Boolean,
24. default: true
25. },
26. isAutoPlay: { /* 自動播放 */
27. type: Boolean,
28. default: true
29. },
30. interval: { /* 播放間隔 */
31. type: Number,
32. default: 2000
33. }
34. },
35. mounted () { /* mounted階段dom渲染完，20ms確保刷新 */
36. setTimeout(() => {
37. this.setSliderWidth()
38. this.initDots()
39. this.initSlider()
40. if (this.isAutoPlay) {
41. this.autoPlay()
42. }
43. }, 20)
44. },
45. methods: {
46. setSliderWidth () { /* 獲取顯示層寬度，計算內容層寬度 */
47. const clientWidth = this.$refs.slider.clientWidth
48. let sliderWidth = 0
49. this.children = this.$refs.group.children
50. for (let i = 0; i < this.children.length; i++) {
51. this.children[i].style.width = clientWidth + 'px'
52. sliderWidth += clientWidth
53. }
54. if (this.isLoop) { /* 循環播放需要增加前后兩個寬度 */
55. sliderWidth += clientWidth * 2
56. }
57. this.$refs.group.style.width = sliderWidth + 'px' /* 設置內容層寬度 */
58. },
59. initDots () {
60. this.dots = new Array(this.children.length)
61. },
62. initSlider () {
63. this.slider = new BScroll(this.$refs.slider, {
64. scrollX: true, /* 橫向滾動 */
65. scrollY: false,
66. snap: { /* 循環滾動設置 */
67. loop: this.isLoop,
68. threshold: 0.3,
69. speed: 400
70. }
71. })
72. this.slider.on('scrollEnd', () => {
73. const pageIndex = this.slider.getCurrentPage().pageX /* 獲取當前輪播頁，用于圓點提示 */
74. this.currentIndex = pageIndex
75. if (this.isAutoPlay) {
76. clearTimeout(this.timer) /* 重新設置自動播放，否則無法自動播放 */
77. this.autoPlay()
78. }
79. })
80. },
81. autoPlay () {
82. this.timer = setTimeout(() => {
83. this.slider.next(400)
84. }, this.interval)
85. }
86. },
87. destroyed () { /* 確保清除定時器 */
88. clearTimeout(this.timer)
89. }
90. }
91. </script>
92.  
93. <style lang="stylus" scoped>
94. .slider-apply
95. position relative // 讓dots找準位置
96. height 200px
97. width 100% // slider-apply會依據父元素寬度顯示寬度
98. overflow hidden // 超出元素隱藏
99. border-radius 5px
100. .dots
101. position absolute
102. bottom 10px
103. left 50%
104. transform translate(-50%, 0) // 居中
105. display flex
106. .dot
107. margin 0 10px
108. height 7px
109. width 7px
110. background #fff
111. border-radius 50%
112. .active // 當前dot樣式
113. width 15px
114. border-radius 50% 5px
115. </style>

應用組件：slider-apply.vue

可以根據alider-apply.vue中的使用方法應用在自己的項目中。

1. <template>
2. <div class="slider-wrapper">
3. <Slider v-if="showSlider"> <!-- showSlider使得數據請求完成后再顯示，否則better-scroll可能會計算錯誤 -->
4. <div v-for="item in imageList" :key="item" class="slider-item">
5. <img :src="item" class="img">
6. </div>
7. </Slider>
8. </div>
9. </template>
10.  
11. <script type='text/ecmascript-6'>
12. import Slider from 'base/slider'
13. export default {
14. data () {
15. return {
16. imageList: [], // 圖片列表
17. showSlider: false // 顯示slider標志位
18. }
19. },
20. created () {
21. this.getImages() // 獲取數據
22. },
23. methods: {
24. getImages () {
25. this.axios.get('/slider').then((res) => {
26. this.imageList = res.data
27. this.showSlider = true
28. }).catch((err) => {
29. console.log(err)
30. })
31. }
32. },
33. components: {
34. Slider
35. }
36. }
37. </script>
38.  
39. <style lang="stylus" scoped>
40.  
41. .slider-wrapper
42. margin 0 auto
43. height 200px // 固定輪播圖顯示高度
44. width 500px // 固定輪播圖顯示寬度，可設置百分比
45. background #000
46. border-radius 5px
47. .slider-item
48. float left // 元素向左浮動
49. width 100%
50. overflow hidden
51. text-align center
52. .img
53. height 200px
54. width 100%
55.  
56. </style>

如果以上步驟沒有看明白的話，可以在我的github中找到源碼https://github.com/Gesj-yean/vue-demo-collection。

總結

到此這篇關于Vue中使用better-scroll實現輪播圖組件的文章就介紹到這了,更多相關vue 輪播圖組件內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們！