cbvirtua 1.0.106 → 1.0.107

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

@@ -0,0 +1,83 @@
+<template>
+  <div class="core-dynamic-content-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content c1" key="1" v-if="!switcher">
+        <div class="scroll-item" v-for="n in nums1" :key="n">{{n}}</div>
+      </div>
+      <div class="scroll-content c2" key="2" v-else>
+        <div class="scroll-item" v-for="n in nums2" :key="n">{{nums2 - n + 1}}</div>
+      </div>
+    </div>
+    <button class="btn" @click="handleClick">switch content element</button>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+
+  export default {
+    data () {
+      return {
+        nums1: 30,
+        nums2: 60,
+        switcher: false
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      handleClick() {
+        this.switcher = !this.switcher
+        // wait for Vue rerender
+        this.$nextTick(() => {
+          this.bs.refresh()
+        })
+      },
+      init() {
+        this.bs = new BScroll(this.$refs.scroll, {
+          probeType: 3
+        })
+        this.bs.on('contentChanged', (content) => {
+          console.log('--- newContent ---')
+          console.log(content)
+        })
+        this.bs.on('scroll', () => {
+          console.log('scrolling-')
+        })
+        this.bs.on('scrollEnd', () => {
+          console.log('scrollingEnd')
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+
+.core-dynamic-content-container
+  text-align center
+  .scroll-wrapper
+    height 300px
+    overflow hidden
+    .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/core/freescroll.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="free-scroll-container">
+    <div class="free-scroll-wrapper">
+      <div class="scroll-wrapper" ref="wrapper">
+        <div class="scroll-content">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import BScroll from '@better-scroll/core'
+  export default {
+    mounted () {
+      this.init()
+    },
+    methods: {
+      init () {
+        this.bs = new BScroll(this.$refs.wrapper, {
+          freeScroll: true,
+          bounce: {
+            bottom: false,
+            left: false,
+            right: false,
+            top: false
+          }
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+.free-scroll-container
+  position: relative
+  width: 100%
+  height: 100%
+  .free-scroll-wrapper
+    position: relative
+    width: 100%
+    height: 100%
+    border: 1px solid rgb(96, 108, 113)
+    box-sizing: border-box
+    .scroll-wrapper
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      overflow: hidden
+      .scroll-content
+        background-color: #efeff4
+        width: 1500px
+        height: 1000px
+        p
+          font-size: 16px
+          padding: 20px
+          line-height: 200%
+          margin: 0
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="horizontal-rotated-container">
+    <div class="description">Flipping layout via CSS</div>
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="num in nums" :key="num">{{num}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+
+  export default {
+    data () {
+      return {
+        nums: 8
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      init() {
+        this.bs = new BScroll(this.$refs.scroll, {
+          scrollX: true,
+          scrollY: false,
+          // v2.3.0
+          quadrant: 3 // rotate180
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+/* flipping by CSS */
+.scroll-wrapper
+  transform rotate(180deg)
+.horizontal-rotated-container
+  .description
+    margin-bottom 40px
+    text-align center
+  .scroll-wrapper
+    height 100px
+    width 250px
+    position relative
+    overflow hidden
+    white-space nowrap
+    margin 0 auto
+    border 1px solid #ccc
+    .scroll-content
+      display inline-block
+    .scroll-item
+      height 100px
+      width 100px
+      line-height 100px
+      font-size 24px
+      font-weight bold
+      text-align center
+      display inline-block
+      &: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/core/horizontal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="horizontal-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'
+
+  export default {
+    data () {
+      return {
+        emojis: [
+          '👉🏼 😁 😂 🤣 👈🏼',
+          '😄 😅 😆 😉 😊',
+          '😫 😴 😌 😛 😜',
+          '👆🏻 😒 😓 😔 👇🏻',
+          '😑 😶 🙄 😏 😣',
+          '😞 😟 😤 😢 😭',
+          '🤑 😲 ☹️ 🙁 😖',
+          '👍 👎 👊 ✊ 🤛',
+          '☝️ ✋ 🤚 🖐 🖖',
+          '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
+          '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
+          '🌖 🌗 🌘 🌑 🌒'
+        ]
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      init() {
+        this.bs = new BScroll(this.$refs.scroll, {
+          scrollX: true,
+          probeType: 3 // listening scroll event
+        })
+        this.bs.on('scrollStart', () => {
+          console.log('scrollStart-')
+        })
+        this.bs.on('scroll', ({ y }) => {
+          console.log('scrolling-')
+        })
+        this.bs.on('scrollEnd', () => {
+          console.log('scrollingEnd')
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.horizontal-container
+  .scroll-wrapper
+    position relative
+    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 10px
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/core/specified-content.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="core-specified-content-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="ignore-content">
+        The Blue area is not taken as BetterScroll's content
+      </div>
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="n in nums" :key="n">{{n}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+
+  export default {
+    data () {
+      return {
+        nums: 30
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      init() {
+        window.bs = this.bs = new BScroll(this.$refs.scroll, {
+          specifiedIndexAsContent: 1,
+          probeType: 3
+        })
+        this.bs.on('scroll', () => {
+          console.log('scrolling-')
+        })
+        this.bs.on('scrollEnd', () => {
+          console.log('scrollingEnd')
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" scoped>
+
+.core-specified-content-container
+  text-align center
+  .scroll-wrapper
+    height 400px
+    overflow hidden
+    border 1px solid #42b983
+    .ignore-content
+      padding 20px
+      color white
+      font-size 20px
+      font-weight bold
+      background-color #2c3e50
+    .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/core/vertical-rotated.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="vertical-rotated-container">
+    <div class="description">Horizontal layout via CSS</div>
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="num in nums" :key="num">{{num}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+
+  export default {
+    data () {
+      return {
+        nums: 8
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      init() {
+        this.bs = new BScroll(this.$refs.scroll, {
+          // v2.3.0
+          quadrant: 2 // rotate90
+        })
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+/* horizontal by CSS */
+.scroll-wrapper
+  transform rotate(90deg)
+.vertical-rotated-container
+  .description
+    text-align center
+  .scroll-wrapper
+    height 250px
+    width 100px
+    position relative
+    overflow hidden
+    margin 0 auto
+    border 1px solid #ccc
+    .scroll-item
+      height 100px
+      width 100px
+      line-height 100px
+      font-size 24px
+      font-weight bold
+      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/form/textarea.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="textarea-container">
+    <div ref="scroller" class="textarea-wrapper">
+      <div class="textarea-scroller">
+        <ul class="textarea-list">
+          <li v-for="i of data1" :key="i" class="textarea-list-item">
+          </li>
+          <textarea class="textarea-text" name="" id="" cols="30" rows="10">Manipulating this area can not make BetterScroll work.</textarea>
+          <li v-for="i of data2" :key="i + 10" class="textarea-list-item">
+          </li>
+        </ul>
+      </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,
+        data1: 10,
+        data2: 10
+      }
+    },
+    mounted() {
+      this.initBscroll()
+    },
+    methods: {
+      initBscroll() {
+        this.bscroll = new BScroll(this.$refs.scroller, {
+          autoBlur: true // for blur
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" scoped>
+.textarea-container
+  height: 100%
+.textarea-wrapper
+  height: 100%
+  padding: 0 10px
+  border: 1px solid #ccc
+  overflow: hidden
+.textarea-list
+  padding: 0
+  text-align: center
+.textarea-list-item
+  padding: 10px 0
+  height: 40px
+  list-style: none
+  border-bottom: 1px solid #ccc
+.textarea-text
+  border: 2px solid #62B791
+  border-radius: 5px
+  margin: 40px auto 0
+  line-height: 2
+  font-size: 20px
+  height: 200px
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/indicators/minimap.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="minimap-container">
+    <div class="scroll-wrapper" ref="wrapper">
+      <!-- maxWidth is used to overwrite vuepress default theme style -->
+      <!-- because this component is used in vuepress markdown as a demo -->
+      <img :style="{ maxWidth: 'none' }" class="scroll-content" :src="dinnerLink" />
+    </div>
+    <div class="scroll-indicator" ref="indicatorWrapper">
+      <img class="scroll-indicator-bg" :src="dinnerLink">
+      <div class="scroll-indicator-handle"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core'
+import Indicators from '@better-scroll/indicators'
+import dinnerLink from './dinner.jpg'
+
+BScroll.use(Indicators)
+
+export default {
+  created () {
+    this.dinnerLink = dinnerLink
+  },
+  mounted () {
+    this.initScroll()
+  },
+  methods: {
+    initScroll () {
+      this.scroll = new BScroll(this.$refs.wrapper, {
+        startX: -50,
+        startY: -50,
+        freeScroll: true,
+        bounce: false,
+        indicators: [
+          {
+            relationElement: this.$refs.indicatorWrapper,
+            // choose div.scroll-indicator-handle as indicatorHandle
+            relationElementHandleElementIndex: 1
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.minimap-container
+  .scroll-wrapper
+    width 320px
+    height 180px
+    overflow hidden
+  .scroll-content
+    width 1920px
+    height 1080px
+  .scroll-indicator
+    margin-top 15px
+    width 320px
+    height 180px
+    position relative
+  .scroll-indicator-bg
+    position absolute
+    width 100%
+    height 100%
+  .scroll-indicator-handle
+    position absolute
+    border 1px solid white
+    box-shadow 0 0 5px white
+    width 64px
+    height 36px
+    z-index 1
+    background-color rgba(255, 255, 255, 0.3)
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/indicators/parallax-scroll.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="parallax-scroll-container">
+    <div class="parallax-scroll-box">
+      <div class="scroll-wrapper" ref="wrapper">
+        <div class="scroll-content" />
+      </div>
+      <div class="scroll-indicator stars1" ref="indicator1">
+        <div class="star1-bg"></div>
+      </div>
+      <div class="scroll-indicator stars2" ref="indicator2">
+        <div class="star2-bg"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core'
+import Indicators from '@better-scroll/indicators'
+
+BScroll.use(Indicators)
+
+export default {
+  mounted () {
+    this.initScroll()
+  },
+  methods: {
+    initScroll () {
+      this.scroll = new BScroll(this.$refs.wrapper, {
+        freeScroll: true,
+        bounce: false,
+        indicators: [
+          {
+            relationElement: this.$refs.indicator1,
+            interactive: false,
+            ratio: 0.4
+          },
+          {
+            relationElement: this.$refs.indicator2,
+            interactive: false,
+            ratio: 0.2
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.parallax-scroll-container
+  height 100%
+  .parallax-scroll-box
+    position relative
+    width 100%
+    height 100%
+    box-sizing border-box
+    border 1px solid #fe0
+  .scroll-wrapper
+    position absolute
+    z-index 3
+    top 0
+    right 0
+    bottom 0
+    left 0
+    overflow hidden
+  .scroll-content
+    width 100%
+    height 4000px
+    background: url('./galaxies1.png')
+  .scroll-indicator
+    position absolute
+    top 0
+    right 0
+    bottom 0
+    left 0
+    overflow hidden
+    &.stars1
+      z-index 2
+    &.stars2
+      z-index 1
+  .star1-bg
+    height 3000px
+    background: url('./galaxies2.png')
+  .star2-bg
+    height 2000px
+    background: url('./stars.jpg')
+</style>