cbvirtua 1.0.106 → 1.0.107

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="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 ? 'scroll up 👆🏻' : `I am item ${i} `}}
+          </li>
+        </ul>
+        <div class="pullup-tips">
+          <div v-if="!isPullUpLoad" class="before-trigger">
+            <span class="pullup-txt">Pull up 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'
+
+  BScroll.use(Pullup)
+
+  export default {
+    data() {
+      return {
+        isPullUpLoad: false,
+        data: 30
+      }
+    },
+    mounted() {
+      this.initBscroll()
+    },
+    methods: {
+      initBscroll() {
+        this.bscroll = new BScroll(this.$refs.scroll, {
+          pullUpLoad: true
+        })
+
+        this.bscroll.on('pullingUp', this.pullingUpHandler)
+      },
+      async pullingUpHandler() {
+        this.isPullUpLoad = true
+
+        await this.requestData()
+
+        this.bscroll.finishPullUp()
+        this.bscroll.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>
+.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/scrollbar/custom.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="custom-scrollbar-container">
+    <div ref="wrapper" class="custom-scrollbar-wrapper">
+      <img @load="onload" class="custom-scrollbar-content" :src="girlImageLink" alt="">
+      <!-- custom-vertical-scrollbar-->
+      <div class="custom-vertical-scrollbar" ref="vertical">
+        <div class="custom-vertical-indicator"></div>
+      </div>
+      <!-- custom-horizontal-scrollbar-->
+      <div class="custom-horizontal-scrollbar" ref="horizontal">
+        <div class="custom-horizontal-indicator"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BScroll from '@better-scroll/core'
+  import ScrollBar from '@better-scroll/scroll-bar'
+  import girlImage from './girl.jpg'
+
+  BScroll.use(ScrollBar)
+
+  export default {
+    data () {
+      return {
+        girlImageLink : girlImage
+      }
+    },
+    methods: {
+      initBscroll() {
+        this.scroll = new BScroll(this.$refs.wrapper, {
+          freeScroll: true,
+          click: true,
+          scrollbar: {
+            customElements: [this.$refs.horizontal, this.$refs.vertical],
+            fade: false,
+            interactive: true,
+            scrollbarTrackClickable: true
+          }
+        })
+      },
+      onload () {
+        this.initBscroll()
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" scoped>
+.custom-scrollbar-container
+  .custom-scrollbar-wrapper
+    position relative
+    width 280px
+    height 280px
+    overflow hidden
+  .custom-scrollbar-content
+    max-width none
+  .custom-vertical-scrollbar
+    position absolute
+    top 50%
+    right 10px
+    height 100px
+    width 7px
+    border-radius 6px
+    transform translateY(-50%) translateZ(0)
+    background-color rgb(200, 200, 200, 0.3)
+  .custom-vertical-indicator
+    width 100%
+    height 20px
+    border-radius 6px
+    background-color #db8090
+  .custom-horizontal-scrollbar
+    position absolute
+    left 50%
+    bottom 10px
+    width 100px
+    height 7px
+    border-radius 6px
+    transform translateX(-50%) translateZ(0)
+    background-color rgb(200, 200, 200, 0.3)
+  .custom-horizontal-indicator
+    height 100%
+    width 20px
+    border-radius 6px
+    background-color #db8090
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/scrollbar/horizontal.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="horizontal-scrollbar-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="index in num" :key="index">{{index}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import Scrollbar from '@better-scroll/scroll-bar'
+
+  BScroll.use(Scrollbar)
+
+  export default {
+    data () {
+      return {
+        num: 12
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.scroll.destroy()
+    },
+    methods: {
+      init() {
+        this.scroll = new BScroll(this.$refs.scroll, {
+          scrollX: true,
+          scrollY: false,
+          click: true,
+          probeType: 1,
+          scrollbar: {
+            fade: false,
+            interactive: true,
+            scrollbarTrackClickable: true,
+            scrollbarTrackOffsetType: 'clickedPoint' // can use 'step'
+          }
+        })
+        this.scroll.on('scrollEnd', () => {
+          console.log('scrollEnd')
+        })
+        this.scroll.on('scrollStart', () => {
+          console.log('scrollStart')
+        })
+        this.scroll.on('scroll', () => {
+          console.log('scroll')
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.horizontal-scrollbar-container
+  .scroll-wrapper
+    position relative
+    display flex
+    align-content center
+    width 90%
+    height 100px
+    margin 80px auto
+    white-space nowrap
+    border 3px solid rgba(30, 80, 255, 0.3)
+    border-radius 5px
+    overflow hidden
+    .scroll-content
+      display inline-block
+      align-self center
+    .scroll-item
+      opacity  0.6
+      color white
+      box-sizing border-box
+      height 50px
+      width 50px
+      line-height 50px
+      border-radius 50%
+      font-size 18px
+      display inline-block
+      text-align center
+      padding 0 10px
+      margin 0 10px
+      &:nth-child(4n)
+        background-color #06F
+      &:nth-child(4n+1)
+        background-color #0f9d00
+      &:nth-child(4n+2)
+        background-color #F00
+      &:nth-child(4n+3)
+        background-color #ffea00
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/scrollbar/mousewheel.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="mousewheel-scrollbar-container">
+    <div ref="wrapper" class="custom-scrollbar-wrapper">
+      <div class="custom-scrollbar-content">
+        <img @load="onload" :src="girlImageLink" alt="">
+      </div>
+      <!-- custom-horizontal-scrollbar-->
+      <div class="custom-horizontal-scrollbar" ref="horizontal">
+        <div class="custom-horizontal-indicator"></div>
+      </div>
+    </div>
+    <div class="tip">please use your mouse-wheel</div>
+  </div>
+</template>
+
+<script>
+  import BScroll from '@better-scroll/core'
+  import ScrollBar from '@better-scroll/scroll-bar'
+  import MouseWheel from '@better-scroll/mouse-wheel'
+  import girlImage from './sad-girl.jpg'
+
+  BScroll.use(ScrollBar)
+  BScroll.use(MouseWheel)
+
+  export default {
+    data () {
+      return {
+        girlImageLink : girlImage
+      }
+    },
+    methods: {
+      initBscroll() {
+        this.scroll = new BScroll(this.$refs.wrapper, {
+          scrollX: true,
+          scrollY: false,
+          click: true,
+          mouseWheel: true,
+          scrollbar: {
+            customElements: [this.$refs.horizontal],
+            fade: true,
+            interactive: true,
+            scrollbarTrackClickable: true
+          }
+        })
+      },
+      onload () {
+        this.initBscroll()
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" scoped>
+.mousewheel-scrollbar-container
+  .custom-scrollbar-wrapper
+    position relative
+    width 280px
+    height 280px
+    overflow hidden
+  .custom-scrollbar-content
+    display inline-block
+    height 280px
+    > img
+      max-width none
+  .custom-horizontal-scrollbar
+    position absolute
+    left 50%
+    bottom 10px
+    width 100px
+    height 7px
+    border-radius 6px
+    transform translateX(-50%) translateZ(0)
+    background-color rgb(200, 200, 200, 0.3)
+  .custom-horizontal-indicator
+    height 100%
+    width 20px
+    border-radius 6px
+    background-color #db8090
+  .tip
+    text-align center
+    margin-top 10px
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <div class="scrollbar">
+    <div ref="wrapper" class="scrollbar-wrapper">
+      <ul class="scrollbar-content">
+        <li v-for="i of 40" :key="i" class="scrollbar-content-item">
+          {{ `I am item ${i} `}}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BScroll from '@better-scroll/core'
+  import ScrollBar from '@better-scroll/scroll-bar'
+
+  BScroll.use(ScrollBar)
+
+  export default {
+    mounted() {
+      this.initBscroll()
+    },
+    methods: {
+      initBscroll() {
+        this.scroll = new BScroll(this.$refs.wrapper, {
+          scrollY: true,
+          scrollbar: true
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="stylus">
+.scrollbar
+  height: 100%
+.scrollbar-wrapper
+  position: relative
+  height: 100%
+  padding: 0 10px
+  border: 1px solid #ccc
+  overflow: hidden
+.scrollbar-content-item
+  padding: 10px 0
+  list-style: none
+  border-bottom: 1px solid #ccc
+  text-align: left
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/slide/banner.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="slide-banner">
+    <div class="banner-wrapper">
+      <div class="slide-banner-wrapper" ref="slide">
+        <div class="slide-banner-content">
+          <div v-for="num in nums" class="slide-page" :class="'page' + num" :key="num">page {{num}}</div>
+        </div>
+      </div>
+      <div class="dots-wrapper">
+        <span
+          class="dot"
+          v-for="num in nums"
+          :key="num"
+          :class="{'active': currentPageIndex === (num - 1)}"></span>
+      </div>
+    </div>
+    <div class="btn-wrap">
+      <button class="next" @click="nextPage">nextPage</button>
+      <button class="prev" @click="prePage">prePage</button>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import Slide from '@better-scroll/slide'
+
+  BScroll.use(Slide)
+
+  export default {
+    data() {
+      return {
+        nums: 4,
+        currentPageIndex: 0
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.slide.destroy()
+    },
+    methods: {
+      init() {
+        this.slide = new BScroll(this.$refs.slide, {
+          scrollX: true,
+          scrollY: false,
+          slide: true,
+          momentum: false,
+          bounce: false,
+          probeType: 3
+        })
+        this.slide.on('scrollEnd', this._onScrollEnd)
+
+        this.slide.on('slideWillChange', (page) => {
+          this.currentPageIndex = page.pageX
+        })
+
+        // v2.1.0
+        this.slide.on('slidePageChanged', (page) => {
+          console.log('CurrentPage changed to => ', page)
+        })
+      },
+      _onScrollEnd () {
+        console.log('CurrentPage => ', this.slide.getCurrentPage())
+      },
+      nextPage() {
+        this.slide.next()
+      },
+      prePage() {
+        this.slide.prev()
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+
+.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
+
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/slide/dynamic.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="dynamic-slide-banner">
+    <div class="banner-wrapper">
+      <div class="slide-banner-wrapper" ref="slide">
+        <div class="slide-banner-content">
+          <div v-for="num in nums" class="slide-page" :class="'page' + num" :key="num">page {{num}}</div>
+        </div>
+      </div>
+      <div class="dots-wrapper">
+        <span
+          class="dot"
+          v-for="num in nums"
+          :key="num"
+          :class="{'active': currentPageIndex === (num - 1)}"></span>
+      </div>
+    </div>
+    <div class="btn-wrap">
+      <button @click="increase" class="increase">increase</button>
+      <button @click="decrease" class="decrease">decrease</button>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import Slide from '@better-scroll/slide'
+
+  BScroll.use(Slide)
+
+  export default {
+    data() {
+      return {
+        nums: 1,
+        currentPageIndex: 0
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.slide.destroy()
+    },
+    methods: {
+      increase() {
+        this.nums += 1
+        this.$nextTick(() => {
+          this.slide.refresh()
+        })
+      },
+      decrease() {
+        this.nums -= 1
+        this.nums = Math.max(1, this.nums) // at least one page
+        this.$nextTick(() => {
+          this.slide.refresh()
+        })
+      },
+      init() {
+        window.slide = this.slide = new BScroll(this.$refs.slide, {
+          scrollX: true,
+          scrollY: false,
+          slide: {
+            autoplay: false,
+            loop: true
+          },
+          momentum: false,
+          bounce: false,
+          probeType: 3
+        })
+        this.slide.on('scrollEnd', this._onScrollEnd)
+
+        this.slide.on('slideWillChange', (page) => {
+          console.log('【slideWillChange】CurrentPage =>', page)
+          this.currentPageIndex = page.pageX
+        })
+
+        // v2.1.0
+        this.slide.on('slidePageChanged', (page) => {
+          console.log('【slidePageChanged】CurrentPage =>', page)
+        })
+      },
+      _onScrollEnd () {
+        console.log('【scrollEnd】CurrentPage =>', this.slide.getCurrentPage())
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus">
+.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
+</style>