cbvirtua 1.0.109 → 1.0.115

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

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

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

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

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

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