cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/mouse-wheel/pullup.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="mouse-wheel-pullup">
+    <div ref="scroll" class="pullup-wrapper">
+      <div class="pullup-content">
+        <ul class="pullup-list">
+          <li v-for="i of data" :key="i" class="pullup-list-item">
+            {{ i % 5 === 0 ? 'use your mousewheel please 👆🏻' : `I am item ${i} `}}
+          </li>
+        </ul>
+        <div class="pullup-tips">
+          <div v-if="!isPullUpLoad" class="before-trigger">
+            <span class="pullup-txt">mousewheel trigger pullingup and load more</span>
+          </div>
+          <div v-else class="after-trigger">
+            <span class="pullup-txt">Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BScroll from '@better-scroll/core'
+  import Pullup from '@better-scroll/pull-up'
+  import MouseWheel from '@better-scroll/mouse-wheel'
+
+  BScroll.use(Pullup)
+  BScroll.use(MouseWheel)
+
+  export default {
+    data() {
+      return {
+        isPullUpLoad: false,
+        data: 30
+      }
+    },
+    mounted() {
+      this.initBscroll()
+    },
+    methods: {
+      initBscroll() {
+        this.scroll = new BScroll(this.$refs.scroll, {
+          probeType: 3,
+          pullUpLoad: true,
+          mouseWheel: true
+        })
+
+        this.scroll.on('pullingUp', this.pullingUpHandler)
+      },
+      async pullingUpHandler() {
+        this.isPullUpLoad = true
+
+        await this.requestData()
+
+        this.scroll.finishPullUp()
+        this.scroll.refresh()
+        this.isPullUpLoad = false
+      },
+      async requestData() {
+        try {
+          const newData = await this.ajaxGet(/* url */)
+          this.data += newData
+        } catch (err) {
+          // handle err
+          console.log(err)
+        }
+      },
+      ajaxGet(/* url */) {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve(20)
+          }, 1000)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" scoped>
+.mouse-wheel-pullup
+  height: 100%
+  .pullup-wrapper
+    height: 100%
+    padding: 0 10px
+    border: 1px solid #ccc
+    overflow: hidden
+  .pullup-list
+    padding: 0
+  .pullup-list-item
+    padding: 10px 0
+    list-style: none
+    border-bottom: 1px solid #ccc
+  .pullup-tips
+    padding: 20px
+    text-align: center
+    color: #999
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/mouse-wheel/vertical-scroll.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="mouse-wheel-vertical-scroll">
+    <div class="mouse-wheel-wrapper" ref="scroll">
+      <div class="mouse-wheel-content">
+        <div class="mouse-wheel-item" v-for="n in 100" :key="n">{{n}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import MouseWheel from '@better-scroll/mouse-wheel'
+  BScroll.use(MouseWheel)
+
+  export default {
+    mounted() {
+      this.init()
+    },
+    methods: {
+      init() {
+        this.scroll = new BScroll(this.$refs.scroll, {
+          mouseWheel: true
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.mouse-wheel-vertical-scroll
+  .mouse-wheel-wrapper
+    height 400px
+    overflow hidden
+    .mouse-wheel-item
+      height 50px
+      line-height 50px
+      font-size 20px
+      font-weight bold
+      text-align center
+      &:nth-child(2n)
+        background-color #C3D899
+      &:nth-child(2n+1)
+        background-color #F2D4A7
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/mouse-wheel/vertical-slide.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="mouse-wheel-slide-vertical">
+    <div class="slide-container">
+      <div class="slide-wrapper" ref="slide">
+        <div class="slide-content">
+          <div class="slide-page page1">page 1</div>
+          <div class="slide-page page2">page 2</div>
+          <div class="slide-page page3">page 3</div>
+          <div class="slide-page page4">page 4</div>
+        </div>
+      </div>
+      <div class="dots-wrapper">
+        <span
+          class="dot"
+          v-for="(item, index) in 4"
+          :key="index"
+          :class="{'active': currentPageIndex === index}"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import Slide from '@better-scroll/slide'
+  import MouseWheel from '@better-scroll/mouse-wheel'
+  BScroll.use(MouseWheel)
+  BScroll.use(Slide)
+
+  export default {
+    data() {
+      return {
+        currentPageIndex: 0
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.slide.destroy()
+    },
+    methods: {
+      init() {
+        this.slide = new BScroll(this.$refs.slide, {
+          scrollX: false,
+          scrollY: true,
+          slide: {
+            loop: true,
+            threshold: 100
+          },
+          mouseWheel: true,
+          momentum: false,
+          bounce: false,
+          stopPropagation: true
+        })
+        this.slide.on('scrollEnd', this._onScrollEnd)
+      },
+      _onScrollEnd() {
+        let pageIndex = this.slide.getCurrentPage().pageY
+        this.currentPageIndex = pageIndex
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+
+.mouse-wheel-slide-vertical
+  height 100%
+  &.view
+    padding 0
+    height 100%
+  .slide-container
+    position relative
+    height 100%
+    font-size 0
+  .slide-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
+
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/movable/default.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="movable-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="(item, index) in emojis" :key="index">{{item}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import Movable from '@better-scroll/movable'
+
+  BScroll.use(Movable)
+
+  export default {
+    data () {
+      return {
+        emojis: [
+          '😀 😁 😂 🤣 😃',
+          '😄 😅 😆 😉 😊',
+          '😫 😴 😌 😛 😜',
+          '👆🏻 😒 😓 😔 👇🏻'
+        ]
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      init() {
+        this.bs = new BScroll(this.$refs.scroll, {
+          bindToTarget: true,
+          scrollX: true,
+          scrollY: true,
+          freeScroll: true,
+          movable: true,
+          startX: 20,
+          startY: 20
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.movable-container
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    box-shadow 0 0 3px rgba(0, 0, 0, .3)
+    .scroll-content
+      width 220px
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      font-weight bold
+      border-bottom 1px solid #eee
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/movable/multi-content-scale.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="movable-multi-content-scale-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content content1">
+        <figure>
+          <figcaption>Swordsman</figcaption>
+          <img class="picture" :src="swordsmanLink"
+         alt="ftstr">
+        </figure>
+      </div>
+      <div class="scroll-content content2">
+        <figure>
+          <figcaption>The Witch</figcaption>
+          <img class="picture" :src="witchLink"
+         alt="qos_crop">
+        </figure>
+      </div>
+    </div>
+    <button class="btn" @click="handleClick">Put The Witch at right-bottom corner</button>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import Movable from '@better-scroll/movable'
+  import Zoom from '@better-scroll/zoom'
+  import SwordsmanLink from './ftstr.png'
+  import WitchLink from './qos_crop.png'
+
+  BScroll.use(Movable)
+  BScroll.use(Zoom)
+
+  export default {
+    created() {
+      this.swordsmanLink = SwordsmanLink
+      this.witchLink = WitchLink
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs1.destroy()
+      this.bs2.destroy()
+    },
+    methods: {
+      handleClick() {
+        this.bs2.putAt('right', 'bottom', 500)
+      },
+      init() {
+        this.bs1 = new BScroll(this.$refs.scroll, {
+          bindToTarget: true,
+          scrollX: true,
+          scrollY: true,
+          freeScroll: true,
+          movable: true,
+          zoom: {
+            start: 1.2,
+            min: 0.5,
+            max: 3
+          }
+        })
+        this.bs1.putAt('center', 'center', 0)
+        this.bs2 = new BScroll(this.$refs.scroll, {
+          specifiedIndexAsContent: 1,
+          bindToTarget: true,
+          scrollX: true,
+          scrollY: true,
+          freeScroll: true,
+          movable: true,
+          startY: 150,
+          zoom: {
+            start: 1,
+            min: 0.5,
+            max: 3
+          }
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.movable-multi-content-scale-container
+
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    position relative
+    box-shadow 0 0 3px rgba(0, 0, 0, .3)
+    .scroll-content
+      position absolute
+      top 0
+      left 0
+      width 200px
+      figure
+        margin 0
+      figcaption
+        font-weight bold
+        margin-bottom 5px
+        text-align center
+        color #ea4c89
+      .picture
+        width 200px
+        height 150px
+        border-radius 10px
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      font-weight bold
+      border-bottom 1px solid #eee
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+
+  .btn
+    margin 40px auto
+    padding 10px
+    color #fff
+    border-radius 4px
+    font-size 20px
+    background-color #666
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/movable/multi-content.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="movable-multi-content-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content content1">
+        <figure>
+          <figcaption>Cold Oasis</figcaption>
+          <img class="picture" :src="picture1"
+         alt="Cold Oasis">
+        </figure>
+      </div>
+      <div class="scroll-content content2">
+        <figure>
+          <figcaption>Warm Oasis</figcaption>
+          <img class="picture" :src="picture2"
+         alt="Warm Oasis">
+        </figure>
+      </div>
+    </div>
+    <button class="btn" @click="handleClick">Put The Warm at center position</button>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  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)
+
+  export default {
+    created() {
+      this.picture1 = picture1
+      this.picture2 = picture2
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs1.destroy()
+      this.bs2.destroy()
+    },
+    methods: {
+      init() {
+        this.bs1 = new BScroll(this.$refs.scroll, {
+          bindToTarget: true,
+          scrollX: true,
+          scrollY: true,
+          freeScroll: true,
+          movable: true,
+          startX: 10,
+          startY: 10
+        })
+        this.bs2 = new BScroll(this.$refs.scroll, {
+          // use wrapper.children[1] as content
+          specifiedIndexAsContent: 1,
+          bindToTarget: true,
+          scrollX: true,
+          scrollY: true,
+          freeScroll: true,
+          movable: true,
+          startX: 0,
+          startY: 170
+        })
+      },
+      handleClick() {
+        this.bs2.putAt('center', 'center')
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.movable-multi-content-container
+
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    position relative
+    box-shadow 0 0 3px rgba(0, 0, 0, .3)
+    .scroll-content
+      position absolute
+      top 0
+      left 0
+      width 200px
+      figure
+        margin 0
+      figcaption
+        font-weight bold
+        margin-bottom 5px
+        text-align center
+        color #ea4c89
+      .picture
+        width 200px
+        height 150px
+        border-radius 10px
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      font-weight bold
+      border-bottom 1px solid #eee
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+
+  .btn
+    margin 40px auto
+    padding 10px
+    color #fff
+    border-radius 4px
+    font-size 20px
+    background-color #666
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/movable/scale.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="core-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="(item, index) in emojis" :key="index">{{item}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import Movable from '@better-scroll/movable'
+  import Zoom from '@better-scroll/zoom'
+
+  BScroll.use(Movable)
+  BScroll.use(Zoom)
+
+  export default {
+    data () {
+      return {
+        emojis: [
+          '😀 😁 😂 🤣 😃',
+          '😄 😅 😆 😉 😊',
+          '😫 😴 😌 😛 😜',
+          '👆🏻 😒 😓 😔 👇🏻'
+        ]
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      init() {
+        this.bs = new BScroll(this.$refs.scroll, {
+          bindToTarget: true,
+          scrollX: true,
+          scrollY: true,
+          freeScroll: true,
+          movable: true,
+          zoom: {
+            start: 1,
+            min: 0.5,
+            max: 3
+          }
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.core-container
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    box-shadow 0 0 3px rgba(0, 0, 0, .3)
+    .scroll-content
+      width 220px
+    .scroll-item
+      height 50px
+      line-height 50px
+      font-size 24px
+      font-weight bold
+      border-bottom 1px solid #eee
+      text-align center
+      &:nth-child(2n)
+        background-color #f3f5f7
+      &:nth-child(2n+1)
+        background-color #42b983
+</style>