{"size": 1772, "ext": "js", "max_stars_repo_path": "packages/react-examples/src/pages/movable/components/multi-content.js", "max_stars_repo_name": "cym2050/better-scroll", "max_stars_repo_stars_event_min_datetime": "2015-12-18T03:29:34.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T12:48:31.000Z", "max_issues_repo_path": "packages/react-examples/src/pages/movable/components/multi-content.js", "max_issues_repo_name": "cym2050/better-scroll", "max_issues_repo_issues_event_min_datetime": "2016-12-08T13:59:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-29T10:59:09.000Z", "max_forks_repo_path": "packages/react-examples/src/pages/movable/components/multi-content.js", "max_forks_repo_name": "cym2050/better-scroll", "max_forks_repo_forks_event_min_datetime": "2016-05-30T11:25:41.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-31T07:47:39.000Z"}
{"max_stars_count": 17030, "max_issues_count": 1172, "max_forks_count": 3231, "avg_line_length": 24.9577464789, "max_line_length": 71, "alphanum_fraction": 0.5953724605}
import React, { useRef, useEffect } from 'react'
import BScroll from '@better-scroll/core'
import Movable from '@better-scroll/movable'

import picture1 from './oasis_one.png'
import picture2 from './oasis_two.png'

BScroll.use(Movable)

const MultiContent = () => {
  const wrapperRef = useRef(null)
  const scrollRef2 = useRef(null)

  useEffect(() => {
    const BS1 = new BScroll(wrapperRef.current, {
      bindToTarget: true,
      scrollX: true,
      scrollY: true,
      freeScroll: true,
      movable: true,
      startX: 10,
      startY: 10,
    })

    const BS2 = (scrollRef2.current = new BScroll(wrapperRef.current, {
      // use wrapper.children[1] as content
      specifiedIndexAsContent: 1,
      bindToTarget: true,
      scrollX: true,
      scrollY: true,
      freeScroll: true,
      movable: true,
      startX: 0,
      startY: 170,
    }))

    return () => {
      BS1.destroy()
      BS2.destroy()
    }
  }, [])

  const handleClick = () => {
    scrollRef2.current.putAt('center', 'center')
  }

  return (
    <div className="movable-multi-content-container view">
      <div className="scroll-wrapper" ref={wrapperRef}>
        <div className="scroll-content content1">
          <figure>
            <figcaption>Cold Oasis</figcaption>
            <img className="picture" src={picture1} alt="Cold Oasis" />
          </figure>
        </div>
        <div className="scroll-content content2">
          <figure>
            <figcaption>Warm Oasis</figcaption>
            <img className="picture" src={picture2} alt="Warm Oasis" />
          </figure>
        </div>
      </div>
      <button className="btn" onClick={handleClick}>
        Put The Warm at center position
      </button>
    </div>
  )
}

export default MultiContent
