cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/slide/components/fullpage.js

@@ -0,0 +1,70 @@
+import React, { useState, useRef, useEffect } from 'react'
+import classNames from 'classnames'
+import BScroll from '@better-scroll/core'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(Slide)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(4)
+
+const FullPage = () => {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollX: true,
+        scrollY: false,
+        slide: {
+          threshold: 100,
+          loop: false,
+          autoplay: false,
+        },
+        useTransition: false,
+        momentum: false,
+        bounce: false,
+        stopPropagation: true,
+      }))
+
+      BS.on('scrollEnd', () => {
+        setCurrentPageIndex(BS.getCurrentPage().pageX)
+      })
+    }
+
+    return () => {
+      scrollRef.current?.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="slide-fullpage view">
+      <div className="banner-wrapper">
+        <div className="slide-banner-wrapper" ref={wrapperRef}>
+          <div className="slide-banner-content">
+            {nums.map((num) => (
+              <div key={num} className={`slide-page page${num}`}>
+                page {num}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="dots-wrapper">
+          {nums.map((num) => (
+            <span
+              key={num}
+              className={classNames('dot', {
+                active: currentPageIndex === num - 1,
+              })}
+            ></span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FullPage

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/slide/components/specified-index.js

@@ -0,0 +1,85 @@
+import React, { useState, useRef, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(Slide)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(4)
+
+const SpecifiedIndex = () => {
+  const [slideCreated, setSlideCreated] = useState(false)
+  const [currentPageIndex, setCurrentPageIndex] = useState(0)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollX: true,
+        scrollY: false,
+        slide: {
+          autoplay: false,
+          loop: true,
+          startPageXIndex: 2, // v2.3.0
+        },
+        momentum: false,
+        bounce: false,
+        probeType: 3,
+      }))
+
+      setCurrentPageIndex(BS.getCurrentPage().pageX)
+      setSlideCreated(true)
+
+      // v2.1.0
+      BS.on('slidePageChanged', (page) => {
+        console.log('CurrentPage changed to => ', page)
+        setCurrentPageIndex(page.pageX)
+      })
+    }
+
+    return () => {
+      scrollRef.current?.destroy()
+    }
+  }, [])
+
+  const handleNextPage = () => {
+    scrollRef.current.next()
+  }
+  const handlePrePage = () => {
+    scrollRef.current.prev()
+  }
+
+  return (
+    <div className="slide-specified-index view">
+      <div className="banner-wrapper">
+        <div className="slide-specified-wrapper" ref={wrapperRef}>
+          <div className="slide-specified-content">
+            {nums.map((num) => (
+              <div key={num} className={`slide-page page${num}`}>
+                page {num}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {slideCreated && (
+        <div className="description">
+          currentPageIndex is {currentPageIndex}
+        </div>
+      )}
+
+      <div className="btn-wrap">
+        <button className="next" onClick={handleNextPage}>
+          nextPage
+        </button>
+        <button className="prev" onClick={handlePrePage}>
+          prePage
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default SpecifiedIndex

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

@@ -0,0 +1,68 @@
+import React, { useState, useRef, useEffect } from 'react'
+import classNames from 'classnames'
+import BScroll from '@better-scroll/core'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(Slide)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(4)
+
+const Vertical = () => {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0)
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        scrollX: false,
+        scrollY: true,
+        slide: {
+          threshold: 100,
+        },
+        useTransition: true,
+        momentum: false,
+        bounce: false,
+        stopPropagation: true,
+      }))
+
+      BS.on('scrollEnd', () => {
+        setCurrentPageIndex(BS.getCurrentPage().pageY)
+      })
+    }
+
+    return () => {
+      scrollRef.current?.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="slide-vertical view">
+      <div className="vertical-wrapper">
+        <div className="slide-vertical-wrapper" ref={wrapperRef}>
+          <div className="slide-vertical-content">
+            {nums.map((num) => (
+              <div key={num} className={`slide-page page${num}`}>
+                page {num}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="dots-wrapper">
+          {nums.map((num) => (
+            <span
+              key={num}
+              className={classNames('dot', {
+                active: currentPageIndex === num - 1,
+              })}
+            ></span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Vertical

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

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import './index.styl'
+
+const examples = [
+  {
+    path: '/slide/banner',
+    name: 'banner slide',
+  },
+  {
+    path: '/slide/fullpage',
+    name: 'page slide',
+  },
+  {
+    path: '/slide/vertical',
+    name: 'vertical slide',
+  },
+  {
+    path: '/slide/dynamic',
+    name: 'dynamic slide（v2.1.0）',
+  },
+  {
+    path: '/slide/specified',
+    name: 'specified index slide（v2.3.0）',
+  },
+]
+
+const Core = (props) => {
+  const goPage = (path) => {
+    props.history.push(path)
+  }
+
+  return (
+    <div className="view slide">
+      <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 Core

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

@@ -0,0 +1,239 @@
+.slide-banner
+  .banner-wrapper
+    position relative
+  .slide-banner-wrapper
+    min-height 1px
+    overflow hidden
+  .slide-banner-content
+    height 200px
+    white-space nowrap
+    font-size 0
+    .slide-page
+      display inline-block
+      height 200px
+      width 100%
+      line-height 200px
+      text-align center
+      font-size 26px
+      &.page1
+        background-color #95B8D1
+      &.page2
+        background-color #DDA789
+      &.page3
+        background-color #C3D899
+      &.page4
+        background-color #F2D4A7
+  .dots-wrapper
+    position absolute
+    bottom 4px
+    left 50%
+    transform translateX(-50%)
+    .dot
+      display inline-block
+      margin 0 4px
+      width 8px
+      height 8px
+      border-radius 50%
+      background #eee
+      &.active
+        width 20px
+        border-radius 5px
+  .btn-wrap
+    margin-top 20px
+    display flex
+    justify-content center
+    button
+      margin 0 10px
+      padding 10px
+      color #fff
+      border-radius 4px
+      background-color #666
+
+.slide-fullpage
+  height 100%
+  &.view
+    padding 0
+    height 100%
+  .banner-wrapper
+    position relative
+    height 100%
+  .slide-banner-wrapper
+    height 100%
+    overflow hidden
+  .slide-banner-content
+    height 100%
+    white-space nowrap
+    font-size 0
+    .slide-page
+      display inline-block
+      height 100%
+      width 100%
+      line-height 200px
+      text-align center
+      font-size 26px
+      transform translate3d(0,0,0)
+      backface-visibility hidden
+      &.page1
+        background-color #95B8D1
+      &.page2
+        background-color #DDA789
+      &.page3
+        background-color #C3D899
+      &.page4
+        background-color #F2D4A7
+  .dots-wrapper
+    position absolute
+    bottom 4px
+    left 50%
+    transform translateX(-50%)
+    .dot
+      display inline-block
+      margin 0 4px
+      width 8px
+      height 8px
+      border-radius 50%
+      background #eee
+      &.active
+        width 20px
+        border-radius 5px
+
+.slide-vertical
+  height 100%
+  &.view
+    padding 0
+    height 100%
+  .vertical-wrapper
+    position relative
+    height 100%
+    font-size 0
+  .slide-vertical-wrapper
+    height 100%
+    overflow hidden
+    .slide-page
+      display inline-block
+      width 100%
+      line-height 200px
+      text-align center
+      font-size 26px
+      transform translate3d(0,0,0)
+      backface-visibility hidden
+      &.page1
+        background-color #D6EADF
+      &.page2
+        background-color #DDA789
+      &.page3
+        background-color #C3D899
+      &.page4
+        background-color #F2D4A7
+  .dots-wrapper
+    position absolute
+    right 4px
+    top 50%
+    transform translateY(-50%)
+    .dot
+      display block
+      margin 4px 0
+      width 8px
+      height 8px
+      border-radius 50%
+      background #eee
+      &.active
+        height  20px
+        border-radius 5px
+
+.dynamic-slide-banner
+  .banner-wrapper
+    position relative
+  .slide-banner-wrapper
+    min-height 1px
+    overflow hidden
+  .slide-banner-content
+    height 200px
+    white-space nowrap
+    font-size 0
+    .slide-page
+      display inline-block
+      height 200px
+      width 100%
+      line-height 200px
+      text-align center
+      font-size 26px
+      &.page1
+        background-color #95B8D1
+      &.page2
+        background-color #DDA789
+      &.page3
+        background-color #C3D899
+      &.page4
+        background-color #F2D4A7
+      &.page5
+        background-color #E71D36
+      &.page6
+        background-color #2EC4B6
+      &.page7
+        background-color #EFFFE9
+      &.page8
+        background-color #011627
+  .dots-wrapper
+    position absolute
+    bottom 4px
+    left 50%
+    transform translateX(-50%)
+    .dot
+      display inline-block
+      margin 0 4px
+      width 8px
+      height 8px
+      border-radius 50%
+      background #eee
+      &.active
+        width 20px
+        border-radius 5px
+  .btn-wrap
+    margin-top 20px
+    display flex
+    justify-content center
+    button
+      margin 0 10px
+      padding 10px
+      color #fff
+      border-radius 4px
+      background-color #666
+
+.slide-specified-index
+  .banner-wrapper
+    position relative
+  .slide-specified-wrapper
+    min-height 1px
+    overflow hidden
+  .slide-specified-content
+    height 200px
+    white-space nowrap
+    font-size 0
+    .slide-page
+      display inline-block
+      height 200px
+      width 100%
+      line-height 200px
+      text-align center
+      font-size 26px
+      &.page1
+        background-color #95B8D1
+      &.page2
+        background-color #DDA789
+      &.page3
+        background-color #C3D899
+      &.page4
+        background-color #F2D4A7
+  .description
+    text-align center
+  .btn-wrap
+    margin-top 20px
+    display flex
+    justify-content center
+    button
+      margin 0 10px
+      padding 10px
+      color #fff
+      border-radius 4px
+      background-color #666

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

@@ -0,0 +1,87 @@
+import React, { useRef, useState, useEffect } from 'react'
+import BScroll from '@better-scroll/core'
+import Zoom from '@better-scroll/zoom'
+
+import good from './good.svg'
+
+BScroll.use(Zoom)
+
+const createArray = (length) => Array.from({ length }, (_v, i) => i + 1)
+const nums = createArray(16)
+
+const Default = () => {
+  const [linkworkTransform, setLinkworkTransform] = useState('scale(1)')
+
+  const wrapperRef = useRef(null)
+  const scrollRef = useRef(null)
+
+  const handleZoomTo = (value) => {
+    scrollRef.current.zoomTo(value, 'center', 'center')
+  }
+
+  useEffect(() => {
+    if (!scrollRef.current) {
+      const BS = (scrollRef.current = new BScroll(wrapperRef.current, {
+        freeScroll: true,
+        scrollX: true,
+        scrollY: true,
+        disableMouse: true,
+        useTransition: true,
+        zoom: {
+          start: 1.5,
+          min: 0.5,
+          max: 3,
+          initialOrigin: ['center', 'center'],
+        },
+      }))
+
+      BS.on('zooming', ({ scale }) => {
+        setLinkworkTransform(`scale(${scale})`)
+      })
+
+      BS.on('zoomEnd', ({ scale }) => {
+        console.log(scale)
+      })
+
+      return () => {
+        scrollRef.current?.destroy()
+      }
+    }
+  }, [])
+
+  return (
+    <div className="zoom-default view">
+      <div className="zoom-wrapper" ref={wrapperRef}>
+        <div className="zoom-items">
+          {nums.map((item, index) => (
+            <div key={index} className="grid-item">
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="btn-wrap">
+        <button className="zoom-half" onClick={() => handleZoomTo(0.5)}>
+          zoomTo:0.5
+        </button>
+        <button className="zoom-original" onClick={() => handleZoomTo(1)}>
+          zoomTo:1
+        </button>
+        <button className="zoom-double" onClick={() => handleZoomTo(2)}>
+          zoomTo:2
+        </button>
+      </div>
+      <div className="linkwork-wrap">
+        <p>changing with zooming action</p>
+        <div
+          className="linkwork-block"
+          style={{ transform: linkworkTransform }}
+        >
+          <img src={good} alt="" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Default

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/pages/zoom/components/good.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592462446757" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2675" width="400" height="400" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M807.2 508.5c-9.7-71.8-40.6-105.2-108.4-122.6-38.8-10-78.2-13.1-118.1-12.7-10.5 0.1-16.1-0.5-13.2-14.5 3-14.2 1.9-29.4 1.6-44.1-0.6-36.4-17-55.9-55.4-66.8-35.5-10.1-61.6-1.5-80.8 28-21.1 32.5-32.6 69-41.3 106.4-9.5 25.8-15.9 52.3-18.6 79.7-8.2 5.7-9 14.5-10.3 23.4-6 40.3-5.7 80.8-4.3 121.3 1 30.5 8.8 59.8 22.8 87 7.3 14.3 14.7 29.4 33 33.2 17.2 8.1 33.2 18.6 52.2 23.1 45.4 10.8 91.2 15.6 137.8 12.6 31.9 2 62.9-4.5 93.9-10.7 61.3-12.4 95.4-50.2 106.4-111.6 7.9-44 8.6-87.9 2.7-131.7z" fill="#FFC152" p-id="2676" data-spm-anchor-id="a313x.7781069.0.i3"></path><path d="M369.2 635.4c-9.7-58.2-3.8-115.8 4-173.5-54-18.3-89.8-4.7-114.8 45.2-19.5 38.9-32.3 80.1-38.5 123.2-7.4 25.8-9.3 52.3-3.6 78.1 8.4 38.3 47.9 63.8 99.9 67.8 4.1 1.3 8 3.5 12.2 3.8 41.3 2.9 66.4-20.7 85.9-53.3-24.5-25.8-39.3-56-45.1-91.3z" fill="#FF6994" p-id="2677"></path></svg>

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

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

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

@@ -0,0 +1,45 @@
+.zoom-default
+  .zoom-wrapper
+    width 100%
+    overflow hidden
+    .zoom-items
+      display flex
+      flex-direction row
+      flex-wrap wrap
+      align-content space-between
+      .grid-item
+        flex 1 1 25%
+        box-sizing border-box
+        height 52px
+        line-height 52px
+        border 1px solid #eee
+        text-align center
+        &:nth-child(2n)
+          background-color #b3d4a8
+        &:nth-child(2n+1)
+          background-color #b6b7a3
+  .btn-wrap
+    margin-top 20px
+    display flex
+    justify-content center
+    button
+      margin 0 10px
+      padding 10px
+      color #fff
+      border-radius 4px
+      background-color #666
+  .linkwork-wrap
+    margin-top 50px
+    p
+      margin 10px 0
+      font-size 16px
+      font-weight bold
+      text-align center
+  .linkwork-block
+    margin 10px auto
+    width 60px
+    height 60px
+    border-radius 50%
+    img {
+      width 100%
+    }

package/better-scroll-dev/better-scroll-dev/packages/react-examples/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;