cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/nested-scroll/components/triple-vertical.js

@@ -0,0 +1,202 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+
+BScroll.use(NestedScroll)
+
+const outerOpenData = [
+  '----Outer Start----',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+]
+
+const outerCloseData = [
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😲 ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '----Outer End----',
+]
+
+const middleOpenData = [
+  '----Middle Start----',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+]
+
+const middleCloseData = [
+  '👆🏻 middle scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  '----Middle End----',
+]
+
+const innerData = [
+  '------Inner Start-----',
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  '-----Inner End-----',
+]
+
+const handleOuterClick = () => {
+  alert('clicked outer item')
+}
+
+const handleMiddleClick = () => {
+  alert('clicked middle item')
+}
+
+const handleInnerClick = () => {
+  alert('clicked inner item')
+}
+
+const TripleVertical = () => {
+  const outerWrapperRef = useRef(null)
+  const middleWrapperRef = useRef(null)
+  const innerWrapperRef = useRef(null)
+
+  useEffect(() => {
+    const outerScroll = new BScroll(outerWrapperRef.current, {
+      nestedScroll: {
+        groupId: 'triple-nested-scroll', // groupId is a string or number
+      },
+      click: true,
+    })
+    const middleScroll = new BScroll(middleWrapperRef.current, {
+      nestedScroll: {
+        groupId: 'triple-nested-scroll', // groupId is a string or number
+      },
+      probeType: 2,
+      click: true,
+    })
+
+    middleScroll.on('scroll', () => {
+      console.log('middleScroll scroll')
+    })
+
+    const innerScroll = new BScroll(innerWrapperRef.current, {
+      // please keep the same groupId as above
+      // all scrolls will be controlled by the same nestedScroll instance
+      nestedScroll: {
+        groupId: 'triple-nested-scroll',
+      },
+      probeType: 2,
+      click: true,
+    })
+
+    innerScroll.on('scroll', () => {
+      console.log('innerScroll scroll')
+    })
+    innerScroll.on('scrollEnd', () => {
+      console.log('innerScroll scrollEnd')
+    })
+
+    return () => {
+      outerScroll.destroy()
+      middleScroll.destroy()
+      innerScroll.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="triple-vertical view">
+      <div className="outer-wrapper" ref={outerWrapperRef}>
+        <div className="outer-content">
+          <ul>
+            {outerOpenData.map((item, index) => (
+              <li
+                key={index}
+                className="outer-list-item"
+                onClick={handleOuterClick}
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+
+          <div className="middle-wrapper" ref={middleWrapperRef}>
+            <div className="middle-content">
+              <ul>
+                {middleOpenData.map((item, index) => (
+                  <li
+                    key={index}
+                    className="middle-list-item"
+                    onClick={handleMiddleClick}
+                  >
+                    {item}
+                  </li>
+                ))}
+              </ul>
+              <div className="inner-wrapper" ref={innerWrapperRef}>
+                <div className="inner-content">
+                  <ul>
+                    {innerData.map((item, index) => (
+                      <li
+                        key={index}
+                        className="middle-list-item"
+                        onClick={handleInnerClick}
+                      >
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+              <ul>
+                {middleCloseData.map((item, index) => (
+                  <li
+                    key={index}
+                    className="middle-list-item"
+                    onClick={handleMiddleClick}
+                  >
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+          <ul>
+            {outerCloseData.map((item, index) => (
+              <li
+                key={index}
+                className="outer-list-item"
+                onClick={handleOuterClick}
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TripleVertical

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/nested-scroll/components/vertical.js

@@ -0,0 +1,138 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+
+BScroll.use(NestedScroll)
+
+const outerOpenData = [
+  '----Outer Start----',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+]
+
+const outerCloseData = [
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😲 ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😲 ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '----Outer End----',
+]
+
+const innerData = [
+  '------Inner Start-----',
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  '-----Inner End-----',
+]
+
+const handleOuterClick = () => {
+  alert('clicked outer item')
+}
+
+const handleInnerClick = () => {
+  alert('clicked inner item')
+}
+
+const Vertical = () => {
+  const outerWrapperRef = useRef(null)
+  const outerScrollRef = useRef(null)
+  const innerWrapperRef = useRef(null)
+  const innerScrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!outerScrollRef.current) {
+      outerScrollRef.current = new BScroll(outerWrapperRef.current, {
+        nestedScroll: {
+          groupId: 'vertical-nested-scroll', // groupId is a string or number
+        },
+        click: true,
+      })
+    }
+    if (!innerScrollRef.current) {
+      innerScrollRef.current = new BScroll(innerWrapperRef.current, {
+        // please keep the same groupId as above
+        // outerScroll and innerScroll will be controlled by the same nestedScroll instance
+        nestedScroll: {
+          groupId: 'vertical-nested-scroll',
+        },
+        click: true,
+      })
+    }
+
+    return () => {
+      outerScrollRef.current?.destroy()
+      innerScrollRef.current?.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="vertical view">
+      <div className="outer-wrapper" ref={outerWrapperRef}>
+        <div className="outer-content">
+          <ul>
+            {outerOpenData.map((item, index) => (
+              <li
+                key={index}
+                className="outer-list-item"
+                onClick={handleOuterClick}
+              >
+                {item}
+              </li>
+            ))}
+            <div className="inner-wrapper" ref={innerWrapperRef}>
+              <ul className="inner-content">
+                {innerData.map((item, index) => (
+                  <li
+                    key={index}
+                    className="inner-list-item"
+                    onClick={handleInnerClick}
+                  >
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            {outerCloseData.map((item, index) => (
+              <li
+                key={index}
+                className="outer-list-item"
+                onClick={handleOuterClick}
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Vertical

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/nested-scroll/index.js

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import './index.styl'
+
+const examples = [
+  {
+    path: '/nested-scroll/vertical',
+    name: 'vertical',
+  },
+  {
+    path: '/nested-scroll/horizontal',
+    name: 'horizontal',
+  },
+  {
+    path: '/nested-scroll/horizontal-in-vertical',
+    name: 'horizontal-in-vertical',
+  },
+  {
+    path: '/nested-scroll/triple-vertical',
+    name: 'triple-vertical',
+  },
+]
+
+const NestedScroll = (props) => {
+  const goPage = (path) => {
+    props.history.push(path)
+  }
+
+  return (
+    <div className="view">
+      <ul className="example-list">
+        {examples.map((item) => (
+          <li
+            className="example-item"
+            onClick={() => goPage(item.path)}
+            key={item.path}
+          >
+            <span>{item.name}</span>
+          </li>
+        ))}
+      </ul>
+      {props.children}
+    </div>
+  )
+}
+
+export default NestedScroll

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/nested-scroll/index.styl

@@ -0,0 +1,119 @@
+.vertical
+  .outer-wrapper
+  .inner-wrapper
+    border: 2px solid #62B791
+    border-radius: 5px
+    transform: rotate(0deg)
+    position: relative
+    overflow: hidden
+  .outer-wrapper
+    height: 100%
+    border: 1px solid rgba(0, 0, 0, .1)
+  .inner-wrapper
+    height: 240px
+    background-color rgba(98,183,145, 0.2)
+  .inner-list-item
+    height: 50px
+    line-height: 50px
+    text-align: center
+    list-style: none
+  .outer-list-item
+    height: 40px
+    line-height: 40px
+    text-align: center
+    list-style: none
+
+.horizontal
+  .outer-wrapper
+    border: 1px solid rgba(0, 0, 0, 0.1)
+    border-radius: 5px
+    transform: rotate(0deg)
+    margin-top: 50px
+    position: relative
+    overflow: hidden
+    .outer-content
+      display: inline-block
+      vertical-align: top
+      white-space: nowrap
+  .inner-wrapper
+    border: 2px solid #62B791
+    border-radius: 5px
+    transform: rotate(0deg)
+    position: relative
+    width: 200px
+    overflow: hidden
+    .inner-content
+      display: inline-block
+      vertical-align: top
+  .list-item
+    display: inline-block
+    line-height: 60px
+  .inner-list-item
+    vertical-align: top // important
+    background-color: rgba(98,183,145, 0.2)
+
+.horizontal-in-vertical-container
+    height: 100%
+  .vertical-wrapper
+    height: 100%
+    border: 1px solid rgba(0, 0, 0, .1)
+    position: relative
+    overflow: hidden
+    .vertical-item
+      line-height: 40px
+      text-align: center
+  .slide-banner-content
+    height: 120px
+    white-space: nowrap
+    font-size: 0
+    .slide-item
+      display: inline-block
+      height: 120px
+      width: 100%
+      line-height: 120px
+      text-align: center
+      font-size: 26px
+      &.page1
+        background-color: #95B8D1
+      &.page2
+        background-color: #DDA789
+      &.page3
+        background-color: #C3D899
+      &.page4
+        background-color: #F2D4A7
+
+.triple-vertical
+  .outer-wrapper
+  .middle-wrapper
+  .inner-wrapper
+    border: 2px solid #62B791
+    border-radius: 5px
+    transform: rotate(0deg)
+    position: relative
+    overflow: hidden
+  .outer-wrapper
+    height: 100%
+    border: 1px solid rgba(0, 0, 0, .1)
+  .middle-wrapper
+    height: 480px
+    background-color rgba(240,65,85, 0.2)
+    border: 2px solid #f04155
+  .inner-wrapper
+    height: 240px
+    background-color rgb(98,183,145)
+  .middle-list-item
+  .inner-list-item
+    height: 50px
+    line-height: 50px
+    text-align: center
+    list-style: none
+    color: white
+
+  .middle-list-item
+    color: #894e06
+
+  .outer-list-item
+    height: 40px
+    line-height: 40px
+    text-align: center
+    list-style: none

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/observe-dom/components/default.js

@@ -0,0 +1,51 @@
+import React, { useState, useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import ObserveDOM from '@better-scroll/observe-dom'
+
+BScroll.use(ObserveDOM)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+
+const Default = () => {
+  const [num, setNum] = useState(10)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      scrollRef.current = new BScroll(wrapperRef.current, {
+        observeDOM: true,
+        scrollX: true,
+        scrollY: false,
+      })
+    }
+  }, [])
+
+  const handleClick = () => {
+    setNum((n) => n + 2)
+  }
+
+  return (
+    <div className="observe-dom-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content">
+          {createArray(num).map((item, index) => (
+            <div
+              key={index}
+              className="scroll-item"
+              onClick={() => handleClick(item)}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+      <button className="btn" onClick={handleClick}>
+        append two children element
+      </button>
+    </div>
+  )
+}
+
+export default Default

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/observe-dom/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import './index.styl'
+
+const ObserveDom = (props) => <>{props.children}</>
+
+export default ObserveDom

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/observe-dom/index.styl

@@ -0,0 +1,29 @@
+.observe-dom-container
+  text-align center
+  .scroll-wrapper
+    width 90%
+    margin 80px auto
+    white-space nowrap
+    border 3px solid #42b983
+    border-radius 5px
+    overflow hidden
+    .scroll-content
+      display inline-block
+      .scroll-item
+        height 50px
+        line-height 50px
+        font-size 24px
+        display inline-block
+        text-align center
+        padding 0 20px
+        &:nth-child(2n)
+          background-color #C3D899
+        &:nth-child(2n+1)
+          background-color #F2D4A7
+	.btn
+		margin 40px auto
+		padding 10px
+		color #fff!important
+		border-radius 4px
+		font-size 20px
+		background-color #666!important

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/observe-image/components/default.js

@@ -0,0 +1,39 @@
+import React, { useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import ObserveImage from '@better-scroll/observe-image'
+
+BScroll.use(ObserveImage)
+
+const images = [
+  'https://dpubstatic.udache.com/static/dpubimg/dEswI1MVy6/zoo.png',
+  'https://dpubstatic.udache.com/static/dpubimg/BYb_wPak21/home.png',
+  'https://dpubstatic.udache.com/static/dpubimg/B6q1pWB0sB/cabin.png',
+  'https://dpubstatic.udache.com/static/dpubimg/76n1ilzf4R/stone.png',
+]
+
+const Default = () => {
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      scrollRef.current = new BScroll(wrapperRef.current, {
+        observeImage: true,
+      })
+    }
+  }, [])
+
+  return (
+    <div className="observe-image-container view">
+      <div className="scroll-wrapper" ref={wrapperRef}>
+        <div className="scroll-content">
+          {images.map((item, index) => (
+            <img width="100%" src={item} alt="" key={index} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Default

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/observe-image/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import './index.styl'
+
+const ObserveImage = (props) => <>{props.children}</>
+
+export default ObserveImage

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/observe-image/index.styl

@@ -0,0 +1,12 @@
+.observe-image-container
+  text-align center
+  .scroll-wrapper
+    position relative
+    width 300px
+    height 300px
+    margin 20px auto
+    border 3px solid #42b983
+    border-radius 5px
+    overflow hidden
+  .scroll-content
+    font-size 0