Vue中利用better-scroll組件實現橫向滾動功能
About
最近在學習vue的過程中,仿照去哪兒網的移動端寫瞭個小項目,旨在實踐和鞏固基礎知識,但是今天發現去哪兒的首頁上有一個組件用戶體驗較差,即一個橫向列表使用瀏覽器的原生滾動實現,列表滾動起來較為生澀,很難受,於是乎決定由better-scroll重寫這個組件。
better-scroll介紹
better-scroll是黃軼大神(沒錯,我學長)寫的基於i-scroll的一個滾動組件,項目地址:https://github.com/ustbhuangyi/better-scroll
一、滾動的實現原理
better-scroll的滾動原理和瀏覽器原生滾動原理是一樣的,當子盒子的高度大於父盒子的高度,就會出現縱向滾動:
同理,如果子盒子的寬度大於父盒子的寬度,那麼就會出現橫向滾動 ( 根本原理 )。
二、在Vue中使用better-scroll
在Vue中使用better-scroll最需要註意的點就是必須等到頁面渲染完成再去執行BScroll的實例化,因為better-scroll必須要得到滾動區域的尺寸和父盒子的尺寸,來計算出是否能滾動,所以我們必須要對Vue的生命周期有一定的瞭解。
這裡是一個小demo,通過這個demo你將會瞭解到如何使用better-scroll
<template> <div class="wrapper" ref="wrapper"> // 在vue中獲取dom元素最簡便的方法就是利用 this.$refs <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div> </template> <script> import BScroll from 'better-scroll' //導入better-scroll export default { mounted() { this.$nextTick(() => { // 使用 this.$nextTick 為瞭確保組件已經渲染完畢 this.scroll = new Bscroll(this.$refs.wrapper, {}) // 實例化BScroll接受兩個參數,第一個為父盒子的dom節點 }) } } </script>
三、在Vue中實現橫向滾動
1. 效果圖對比
使用原生滾動:
使用better-scroll:
2. 代碼(請看註釋)
<template> <div class="recommand-wrap"> <div class="title"> <img class="title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="本周熱門榜單"> <span class="title-hotrec">本周熱門榜單</span> <span class="title-allrec">全部榜單</span> </div> <div ref="wrapper"> /* 這裡是父盒子*/ <ul class="cont" ref="cont"> /* 這裡是子盒子,即滾動區域*/ <li class="cont-item" v-for="item of recommendList" :key="item.id"> <div class="cont-img"> <img class="img" :src="item.url" :alt="item.text"> </div> <div class="cont-dest">{{item.text}}</div> <div class="cont-price"> <span class="price">¥{{item.price}}</span> <span>起</span> </div> </li> </ul> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { name: 'HomeRecommand', props: { recommendList: { type: Array, required: true } }, components: { }, data () { return { } }, methods: { verScroll () { let width = this.recommendList.length * 110// 動態計算出滾動區域的大小,前面已經說過瞭,產生滾動的原因是滾動區域寬度大於父盒子寬度 this.$refs.cont.style.width = width + 'px' // 修改滾動區域的寬度 this.$nextTick(() => { if (!this.scroll) { this.scroll = new BScroll(this.$refs.wrapper, { startX: 0, // 配置的詳細信息請參考better-scroll的官方文檔,這裡不再贅述 click: true, scrollX: true, scrollY: false, eventPassthrough: 'vertical' }) } else { this.scroll.refresh() //如果dom結構發生改變調用該方法 } }) } }, mounted () { this.$nextTick(() => { let timer = setTimeout(() => { // 其實我也不想寫這個定時器的,這相當於又嵌套瞭一層$nextTick,但是不這麼寫會失敗 if (timer) { clearTimeout(timer) this.verScroll() } }, 0) }) } } </script> <style lang="scss" scoped> .recommand-wrap { height: 0; padding-bottom: 50%; margin-top: .2rem; background: #fff; padding-left: .24rem; width: 100%; .title { position: relative; height: 40px; display: flex; padding: 12px 0; box-sizing: border-box; .title-img { width: 15px; height: 15px; } .title-hotrec { font-size: 16px; margin-left: 4px; } .title-allrec { position: absolute; padding-top: 2px; font-size: 13px; right: 20px; color: gray; } } .cont { list-style: none; // overflow-x: scroll; white-space: nowrap; font-size: 12px; text-align: center; padding-right: .24rem; .cont-item { position: relative; display: inline-block; padding: .06rem 0 .2rem; width: 2rem; margin: 0 .1rem; .cont-img { overflow: hidden; width: 2rem; height: 0; padding-bottom: 100%; .img { width: 100%; } } .cont-dest { margin: .1rem 0; } .cont-price { .price { color: #ff8300; } } } } } </style>
參考鏈接
作者:黃軼
鏈接:https://zhuanlan.zhihu.com/p/27407024
總結
到此這篇關於Vue中利用better-scroll組件實現橫向滾動的文章就介紹到這瞭,更多相關Vue better-scroll橫向滾動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue使用better-scroll實現橫向滾動的方法實例
- vue實現錨點跳轉及滾動監聽的方法
- 淺談VUE uni-app 基礎組件
- 關於better-scroll插件的無法滑動bug(2021通過插件解決)
- vue模態框實現動態錨點