cbvirtua 1.0.109 → 1.0.115

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

@@ -1,94 +0,0 @@
-<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

@@ -1,87 +0,0 @@
-<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

@@ -1,94 +0,0 @@
-<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

@@ -1,82 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<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

@@ -1,129 +0,0 @@
-<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

@@ -1,146 +0,0 @@
-<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>