react中使用better-scroll滾動插件的實現(xiàn)示例

更新時間：2023年07月12日 10:27:32 作者：太努力容易優(yōu)秀

滾動在很多地方都可以使用，本文主要介紹了react中使用better-scroll滾動插件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在react中使用better-scroll滾動插件最近公司使用react項目中有一些滾動的效果需要有一些插件來支持，比如iScroll，或者react-scroll，最后還是選擇了better-scroll文檔比較友好。

進入正題：首先當然是npm安裝啦

npm install better-scroll --save

安裝完成后開始使用首先在要用到的組件引入better-scroll

import BScroll from 'better-scroll'

準備工作完成首先在render里寫下官方定義的DOM

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 這里可以放一些其它的 DOM，但不會影響滾動 -->
</div>

在生命周期里進行初始實例化

componentDidMount() {
    const wrapper = document.querySelector('.wrapper')
    //選中DOM中定義的 .wrapper 進行初始化
    const scroll = new BScroll(wrapper, {
      scrollX: true,  //開啟橫向滾動
      click: true,  // better-scroll 默認會阻止瀏覽器的原生 click 事件
      scrollY: false, //關閉豎向滾動
    })
  }

切記不可以在render里進行實例化因為在第一次觸發(fā)render的時候DOM還未生成所以需要在componentDidMount里進行。滾動原理

很多人已經(jīng)用過 better-scroll，但是最多的問題是：

better-scroll 初始化了， 但是沒法滾動。

不能滾動是現(xiàn)象，我們得搞清楚這其中的根本原因。在這之前，我們先來看一下瀏覽器的滾動原理：瀏覽器的滾動條大家都會遇到，當頁面內(nèi)容的高度超過視口高度的時候，會出現(xiàn)縱向滾動條；當頁面內(nèi)容的寬度超過視口寬度的時候，會出現(xiàn)橫向滾動條。也就是當我們的視口展示不下內(nèi)容的時候，會通過滾動條的方式讓用戶滾動屏幕看到剩余的內(nèi)容。

better-scroll 也是一樣的原理，我們可以用一張圖更直觀的感受一下：

布局

綠色部分為 wrapper，也就是父容器，它會有固定的高度。黃色部分為 content，它是父容器的第一個子元素，它的高度會隨著內(nèi)容的大小而撐高。那么，當 content 的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，我們就可以滾動內(nèi)容區(qū)了，這就是 better-scroll 的滾動原理。

完成后就開始css以及style了

<div className="wrapper">
    <ul className="content" style={{ width: `${210 * _flattenDeep(list).length}px` }}>
            {
            _map(_flattenDeep(list), (v, i) => {
              return (
                <li className="scroll_prod" key={i}>
                  <img src={v.img} />
                  <div>{v.product}</div>
                </li>
              )
            })
          }
  </ul>
</div>

這里實例是橫行滾動因為看到關于解決better-scroll橫向滾動的問題的帖子較荒。首先需要給wrapper設置css

.wrapper{
    width: 100%;
    white-space: nowrap; //讓子元素超出不換行
    padding: 25px 13px;
    overflow: hidden;
    }

content元素需要設置動態(tài)的width，可以去估算出每個元素的寬度

 <ul 
 className="content" 
 style={{ width: `${210 * _flattenDeep(list).length}px` }}
 >
</ul>

在這里我根據(jù)數(shù)組元素的length來置換ul的總寬度然后就可以滾動啦！當然要是需要豎向滾動需要設置在初始化時

componentDidMount() {
    const wrapper = document.querySelector('.wrapper')
    //選中DOM中定義的 .wrapper 進行初始化
    const scroll = new BScroll(wrapper, {
      click: true,  // better-scroll 默認會阻止瀏覽器的原生 click 事件
      scrollY: true, //關閉豎向滾動
    })
  }

開啟scrollY配置。

結(jié)言：當然better-scroll不只是這兩個API官網(wǎng)有很多更好用的API可以根據(jù)官網(wǎng)操作（http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/）如果要操作實例上面的方法的話固然在componentDidMount函數(shù)里是訪問不到已經(jīng)實例化的BScroll的，所以我們可以將實例掛載到state中。

import BScroll from 'better-scroll'
class Commodity extends Component {
  constructor(props) {
    super(props)
    this.state = {
      Bscroll: '',
    }
  }
  componentDidMount() {
    const wrapper = document.querySelector('.wrapper')
    const scroll = new BScroll(wrapper, {
      scrollX: true,
      click: true,
      scrollY: false,
    })
    this.setState({
      Bscroll: scroll,
    })
  }
 render() {
    const { Bscroll } = this.state
 	render(){
		return(
		<>
		<div className="wrapper">
          <ul className="content" style={{ width: `${210 * _flattenDeep(list).length}px` }}>
            {
            _map(_flattenDeep(list), (v, i) => {
              return (
                <li className="scroll_prod" key={i}>
                  <img src={v.img} />
                  <div>{v.product}</div>
                  <a className="buy">立即購買</a>
                </li>
              )
            })
          }
          </ul>
        </div>
		</>
		)
	}

到此這篇關于react中使用better-scroll滾動插件的實現(xiàn)示例的文章就介紹到這了,更多相關react better-scroll滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: