快捷導(dǎo)航

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

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

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

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

進(jìn)入正題：首先當(dāng)然是npm安裝啦

npm install better-scroll --save

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

import BScroll from 'better-scroll'

準(zhǔn)備工作完成首先在render里寫(xiě)下官方定義的DOM

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

在生命周期里進(jìn)行初始實(shí)例化

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

切記不可以在render里進(jìn)行實(shí)例化因?yàn)樵诘谝淮斡|發(fā)render的時(shí)候DOM還未生成所以需要在componentDidMount里進(jìn)行。滾動(dòng)原理

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

better-scroll 初始化了， 但是沒(méi)法滾動(dòng)。

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

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

布局

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

完成后就開(kāi)始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>

這里實(shí)例是橫行滾動(dòng)因?yàn)榭吹疥P(guān)于解決better-scroll橫向滾動(dòng)的問(wèn)題的帖子較荒。首先需要給wrapper設(shè)置css

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

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

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

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

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

開(kāi)啟scrollY配置。

結(jié)言：當(dāng)然better-scroll不只是這兩個(gè)API官網(wǎng)有很多更好用的API可以根據(jù)官網(wǎng)操作（http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/）如果要操作實(shí)例上面的方法的話(huà)固然在componentDidMount函數(shù)里是訪(fǎng)問(wèn)不到已經(jīng)實(shí)例化的BScroll的，所以我們可以將實(shí)例掛載到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">立即購(gòu)買(mǎi)</a>
                </li>
              )
            })
          }
          </ul>
        </div>
		</>
		)
	}

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

您可能感興趣的文章: