cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/nested-scroll/horizontal-in-vertical.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="horizontal-in-vertical-container">
+    <div class="vertical-wrapper" ref="outerScroll">
+      <div class="vertical-content">
+        <div class="vertical-item" @click="handleOuterClick" v-for="(item, idx) in list1" :key="idx">{{item}}</div>
+        <div class="horizontal-wrapper" ref="innerScroll">
+          <div class="slide-banner-content" @click="handleInnerClick">
+              <div class="slide-item page1">horizontal scroll 1</div>
+              <div class="slide-item page2">horizontal scroll 2</div>
+              <div class="slide-item page3">horizontal scroll 3</div>
+              <div class="slide-item page4">horizontal scroll 4</div>
+          </div>
+        </div>
+        <div class="vertical-item" @click="handleOuterClick" v-for="(item, idx) in list2" :key="idx + 10">{{item}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core';
+import NestedScroll from '@better-scroll/nested-scroll'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(NestedScroll)
+BScroll.use(Slide)
+
+const LIST1 = [
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+]
+const LIST2 = [
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 vertical scroll 👇🏻 ',
+  '😔 😕 🙃 🤣 😲 🙃 🤣'
+]
+export default {
+  data () {
+    return {
+      list1: LIST1,
+      list2: LIST2
+    }
+  },
+  mounted () {
+    this.initScroll()
+  },
+  methods: {
+    handleOuterClick () {
+      window.alert('clicked outer item')
+    },
+    handleInnerClick () {
+      window.alert('clicked inner item')
+    },
+    initScroll () {
+      let outerScroll = new BScroll(this.$refs.outerScroll, {
+        nestedScroll: {
+          groupId: 'mixed-nested-scroll'
+        },
+        click: true
+      })
+      let innerScroll = new BScroll(this.$refs.innerScroll, {
+        nestedScroll: {
+          groupId: 'mixed-nested-scroll'
+        },
+        scrollX: true,
+        scrollY: false,
+        slide: {
+          loop: false,
+          autoplay: false,
+          threshold: 100
+        },
+        momentum: false,
+        bounce: false,
+        click: true
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .horizontal-in-vertical-container
+      height: 100%
+    .vertical-wrapper
+      height: 100%
+      border: 1px solid rgba(0, 0, 0, .1)
+      position: relative
+      overflow: hidden
+      .vertical-item
+        line-height: 40px
+        text-align: center
+    .slide-banner-content
+      height: 120px
+      white-space: nowrap
+      font-size: 0
+      .slide-item
+        display: inline-block
+        height: 120px
+        width: 100%
+        line-height: 120px
+        text-align: center
+        font-size: 26px
+        &.page1
+          background-color: #95B8D1
+        &.page2
+          background-color: #DDA789
+        &.page3
+          background-color: #C3D899
+        &.page4
+          background-color: #F2D4A7
+</style>

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

@@ -0,0 +1,120 @@
+<template>
+  <div class="container">
+      <div ref="outerScroll" class="outer-wrapper">
+        <ul class="outer-content">
+          <li v-for="(item, idx) in items1" @click="handleOuterClick" :key="idx" class="list-item">{{ item }}</li>
+          <li class="list-item inner-list-item">
+            <div
+              ref="innerScroll"
+              class="inner-wrapper">
+              <ul class="inner-content">
+                <li v-for="(item, idx) in items2" @click="handleInnerClick" :key="idx" class="list-item">{{ item }}</li>
+              </ul>
+            </div>
+          </li>
+          <li v-for="(item, idx) in items1" @click="handleOuterClick" :key="idx + 100" class="list-item">{{ item }}</li>
+        </ul>
+      </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+BScroll.use(NestedScroll)
+
+const _data1 = [
+  '👈🏻  outer 👉🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 '
+]
+
+const _data2 = [
+  '👈🏻  inner 👉🏻  ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👈🏻  inner 👉🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ ',
+  '👈🏻  inner 👉🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👈🏻  inner 👉🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 '
+]
+
+export default {
+  data() {
+    return {
+      items1: _data1,
+      items2: _data2
+    }
+  },
+  mounted () {
+    this.initBScroll()
+  },
+  beforeDestroy () {
+    this.outerScroll.destroy()
+    this.innerScroll.destroy()
+  },
+  methods: {
+    handleOuterClick () {
+      window.alert('clicked outer item')
+    },
+    handleInnerClick () {
+      window.alert('clicked inner item')
+    },
+    initBScroll () {
+      // outer
+      this.outerScroll = new BScroll(this.$refs.outerScroll, {
+        nestedScroll: {
+          groupId: 'horizontal-nested-scroll'  // groupId is a string or number
+        },
+        scrollX: true,
+        scrollY: false,
+        click: true
+      })
+      // inner
+      this.innerScroll = new BScroll(this.$refs.innerScroll, {
+        // please keep the same groupId as above
+        // outerScroll and innerScroll will be controlled by the same nestedScroll instance
+        nestedScroll: {
+          groupId: 'horizontal-nested-scroll'
+        },
+        scrollX: true,
+        scrollY: false,
+        click: true
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+  .outer-wrapper
+    border: 1px solid rgba(0, 0, 0, 0.1)
+    border-radius: 5px
+    transform: rotate(0deg)
+    margin-top: 50px
+    position: relative
+    overflow: hidden
+    .outer-content
+      display: inline-block
+      vertical-align: top
+      white-space: nowrap
+
+  .inner-wrapper
+    border: 2px solid #62B791
+    border-radius: 5px
+    transform: rotate(0deg)
+    position: relative
+    width: 200px
+    overflow: hidden
+    .inner-content
+      display: inline-block
+      vertical-align: top
+
+  .list-item
+    display: inline-block
+    line-height: 60px
+
+  .inner-list-item
+    vertical-align: top // important
+    background-color: rgba(98,183,145, 0.2)
+</style>

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

@@ -0,0 +1,207 @@
+<template>
+  <div class="container">
+    <div ref="outerScroll" class="outer-wrapper">
+      <div class="outer-content">
+        <ul>
+          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerOpenData" :key="index">{{item}}</li>
+        </ul>
+        <div ref="middleScroll"  class="middle-wrapper">
+          <div class="middle-content">
+            <ul>
+              <li class="middle-list-item" @click="handleMiddleClick" v-for="(item, index) in middleOpenData" :key="index">{{item}}</li>
+            </ul>
+            <div ref="innerScroll" class="inner-wrapper">
+              <ul class="inner-content">
+                <li class="inner-list-item" v-for="(item, index) in innerData" @click="handleInnerClick" :key="index">{{item}}</li>
+              </ul>
+            </div>
+            <ul>
+              <li class="middle-list-item" @click="handleMiddleClick" v-for="(item, index) in middleCloseData" :key="index + 100">{{item}}</li>
+            </ul>
+          </div>
+        </div>
+        <ul>
+          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerCloseData" :key="index + 100">{{item}}</li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+BScroll.use(NestedScroll)
+
+const outerOpenData = [
+  '----Outer Start----',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 '
+]
+
+const outerCloseData = [
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😲 ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '----Outer End----',
+]
+
+const middleOpenData = [
+  '----Middle Start----',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+]
+
+const middleCloseData = [
+  '👆🏻 middle scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 middle scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  '----Middle End----',
+]
+
+const innerData = [
+  '------Inner Start-----',
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  '-----Inner End-----'
+]
+
+export default {
+  data() {
+    return {
+      outerOpenData,
+      outerCloseData,
+      middleOpenData,
+      middleCloseData,
+      innerData,
+    }
+  },
+  mounted () {
+    this.initBScroll()
+  },
+  beforeDestroy () {
+    this.outerScroll.destroy()
+    this.middleScroll.destroy()
+    this.innerScroll.destroy()
+  },
+  methods: {
+    handleOuterClick () {
+      window.alert('clicked outer item')
+    },
+    handleMiddleClick () {
+      window.alert('clicked middle item')
+    },
+    handleInnerClick () {
+      window.alert('clicked inner item')
+    },
+    initBScroll () {
+      // outer
+      this.outerScroll = this.outerScroll = new BScroll(this.$refs.outerScroll, {
+        nestedScroll: {
+          groupId: 'triple-nested-scroll' // groupId is a string or number
+        },
+        click: true
+      })
+
+      // inner
+      this.innerScroll = new BScroll(this.$refs.innerScroll, {
+        // please keep the same groupId as above
+        // all scrolls will be controlled by the same nestedScroll instance
+        nestedScroll: {
+          groupId: 'triple-nested-scroll'
+        },
+        probeType:2,
+        click: true
+      })
+
+      this.innerScroll.on('scroll', () => {
+        console.log('innerScroll scroll')
+      })
+      this.innerScroll.on('scrollEnd', () => {
+        console.log('innerScroll scrollEnd')
+      })
+
+      // middle
+      this.middleScroll = new BScroll(this.$refs.middleScroll, {
+        nestedScroll: {
+          groupId: 'triple-nested-scroll' // groupId is a string or number
+        },
+        probeType: 2,
+        click: true
+      })
+
+      this.middleScroll.on('scroll', () => {
+        console.log('middleScroll scroll')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.container
+  height: 100%
+.outer-wrapper
+.middle-wrapper
+.inner-wrapper
+  border: 2px solid #62B791
+  border-radius: 5px
+  transform: rotate(0deg)
+  position: relative
+  overflow: hidden
+.outer-wrapper
+  height: 100%
+  border: 1px solid rgba(0, 0, 0, .1)
+.middle-wrapper
+  height: 480px
+  background-color rgba(240,65,85, 0.2)  
+  border: 2px solid #f04155
+.inner-wrapper
+  height: 240px
+  background-color rgb(98,183,145)
+.middle-list-item
+.inner-list-item
+  height: 50px
+  line-height: 50px
+  text-align: center
+  list-style: none
+  color: white
+
+.middle-list-item
+  color: #894e06
+
+.outer-list-item
+  height: 40px
+  line-height: 40px
+  text-align: center
+  list-style: none
+</style>

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

@@ -0,0 +1,147 @@
+<template>
+  <div class="container">
+    <div ref="outerScroll" class="outer-wrapper">
+      <div class="outer-content">
+        <ul>
+          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerOpenData" :key="index">{{item}}</li>
+        </ul>
+        <div ref="innerScroll" class="inner-wrapper">
+          <ul class="inner-content">
+            <li class="inner-list-item" v-for="(item, index) in innerData" @click="handleInnerClick" :key="index">{{item}}</li>
+          </ul>
+        </div>
+        <ul>
+          <li class="outer-list-item" @click="handleOuterClick" v-for="(item, index) in outerCloseData" :key="index">{{item}}</li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+BScroll.use(NestedScroll)
+
+const outerOpenData = [
+  '----Outer Start----',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 '
+]
+
+const outerCloseData = [
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😲 ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😲 ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '----Outer End----',
+]
+
+const innerData = [
+  '------Inner Start-----',
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  '-----Inner End-----'
+]
+
+export default {
+  data() {
+    return {
+      outerOpenData,
+      outerCloseData,
+      innerData,
+    }
+  },
+  mounted () {
+    this.initBScroll()
+  },
+  beforeDestroy () {
+    this.outerScroll.destroy()
+    this.innerScroll.destroy()
+  },
+  methods: {
+    handleOuterClick () {
+      window.alert('clicked outer item')
+    },
+    handleInnerClick () {
+      window.alert('clicked inner item')
+    },
+    initBScroll () {
+      // outer
+      this.outerScroll = new BScroll(this.$refs.outerScroll, {
+        nestedScroll: {
+          groupId: 'vertical-nested-scroll' // groupId is a string or number
+        },
+        click: true
+      })
+
+      // inner
+      this.innerScroll = new BScroll(this.$refs.innerScroll, {
+        // please keep the same groupId as above
+        // outerScroll and innerScroll will be controlled by the same nestedScroll instance
+        nestedScroll: {
+          groupId: 'vertical-nested-scroll'
+        },
+        click: true
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.container
+  height: 100%
+.outer-wrapper
+.inner-wrapper
+  border: 2px solid #62B791
+  border-radius: 5px
+  transform: rotate(0deg)
+  position: relative
+  overflow: hidden
+.outer-wrapper
+  height: 100%
+  border: 1px solid rgba(0, 0, 0, .1)
+.inner-wrapper
+  height: 240px
+  background-color rgba(98,183,145, 0.2)
+.inner-list-item
+  height: 50px
+  line-height: 50px
+  text-align: center
+  list-style: none
+
+.outer-list-item
+  height: 40px
+  line-height: 40px
+  text-align: center
+  list-style: none
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="observe-dom-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="num in nums" :key="num">{{nums - num + 1}}</div>
+      </div>
+    </div>
+		<button class="btn" @click="handleClick">append two children element</button>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  import BScroll from '@better-scroll/core'
+  import ObserveDOM from '@better-scroll/observe-dom'
+
+  BScroll.use(ObserveDOM)
+  export default {
+    data () {
+      return {
+        nums: 10
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    beforeDestroy() {
+      this.bs.destroy()
+    },
+    methods: {
+      init() {
+        this.bs = new BScroll(this.$refs.scroll, {
+          observeDOM: true,
+          scrollX: true,
+          scrollY: false
+        })
+      },
+      handleClick() {
+        // observe-dom plugin will refresh bs
+        this.nums += 2
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.observe-dom-container
+  text-align center
+  .scroll-wrapper
+    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 20px
+        &:nth-child(2n)
+          background-color #C3D899
+        &:nth-child(2n+1)
+          background-color #F2D4A7
+	.btn
+		margin 40px auto
+		padding 10px
+		color #fff
+		border-radius 4px
+		font-size 20px
+		background-color #666   			
+</style>