cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/compose/pullup-pulldown-slide.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="pullup-down-slide-wrapper">
+    <!-- pulldown -->
+    <div
+      class="pulldown-wrapper"
+      ref="pulldown"
+    >
+      <div v-show="beforePullDown">
+        <span>Pull Down and refresh</span>
+      </div>
+      <div v-show="!beforePullDown">
+        <div v-show="isPullingDown">
+          <span>Loading...</span>
+        </div>
+        <div v-show="!isPullingDown">
+          <span>Refresh success</span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pullup-pulldown-slide-bswrapper"
+      ref="bsWrapper"
+    >
+      <div class="pullup-pulldown-slide-scroller">
+        <!-- slide item -->
+        <div
+          :key="idx"
+          class="pullup-pulldown-slide-item"
+          :class="{['page' + idx % 4 ]: true}"
+          v-for="(item, idx) of dataList"
+        >{{ `Page ${idx} ` }}</div>
+
+      </div>
+    </div>
+    <!-- pollup -->
+    <div class="pullup-wrapper" ref="pullup">
+      <div v-show="!isPullingUp">
+        <span>Pull Up and load</span>
+      </div>
+      <div v-show="isPullingUp">
+        <span>Loading...</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+import PullUp from '@better-scroll/pull-up'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(PullDown)
+BScroll.use(PullUp)
+BScroll.use(Slide)
+
+const BASE = 2
+const TIME_BOUNCE = 700
+const REQUEST_TIME = 1000
+const THRESHOLD = 50
+const STOP = 56
+
+export default {
+  data() {
+    return {
+      beforePullDown: true,
+      isPullingDown: false,
+      isPullingUp: false,
+      dataList: new Array(BASE),
+      stopPullup: false
+    }
+  },
+  created() {
+    this.bscroll = null
+  },
+  mounted() {
+    this.initBscroll()
+  },
+  methods: {
+    initBscroll() {
+      this.bscroll = new BScroll(this.$refs.bsWrapper, {
+        scrollY: true,
+        bounceTime: TIME_BOUNCE,
+        momentum: false,
+        // pullDown options
+        pullDownRefresh: {
+          threshold: THRESHOLD,
+          stop: STOP
+        },
+        // pullUp options
+        pullUpLoad: {
+          threshold: -THRESHOLD
+        },
+        // slide options
+        slide: {
+          threshold: 5,
+          disableSetHeight: true,
+          autoplay: false,
+          loop: false
+        }
+      })
+      // listening evnets
+      this.bscroll.on('pullingDown', this.pullingDownHandler)
+      this.bscroll.on('pullingUp', this.pullingUpHandler)
+      this.bscroll.on('scroll', this.scrollHandler)
+    },
+    // scroll event handler
+    scrollHandler(pos) {
+      if (pos.y >= 0) {
+        const pullDownEle = this.$refs.pulldown
+        const { height: pulldownH } = getComputedStyle(pullDownEle, null)
+        pullDownEle.style.transform = `translateY(${-parseInt(pulldownH) +
+          pos.y}px) translateZ(0)`
+      }
+      const pullupThreshold = -30
+      const maxScrollY = this.bscroll.maxScrollY
+      if (pos.y - maxScrollY <= pullupThreshold && this.isPullingUp) {
+        this.stopPullup = true
+      }
+      if (pos.y - maxScrollY <= 0 && !this.stopPullup) {
+        const pullUpEle = this.$refs.pullup
+        const { height: pullupH } = getComputedStyle(pullUpEle, null)
+        pullUpEle.style.transform = `translateY(${pos.y - maxScrollY}px) translateZ(0)`
+      }
+    },
+    // pullingDown event handler
+    async pullingDownHandler() {
+      this.beforePullDown = false
+      this.isPullingDown = true
+      this.bscroll.enabled = false
+      await this.requestData('refresh')
+      this.isPullingDown = false
+      this.$nextTick(() => {
+        this.bscroll.finishPullDown()
+        this.beforePullDown = true
+        this.bscroll.enabled = true
+        this.bscroll.refresh()
+      })
+    },
+    // pullingUp event handler
+    async pullingUpHandler() {
+      this.isPullingUp = true
+      this.bscroll.enabled = false
+      await this.requestData('load')
+      this.$nextTick(() => {
+        this.isPullingUp = false
+        this.bscroll.finishPullUp()
+        this.bscroll.enabled = true
+        this.bscroll.refresh()
+        this.resetPullupPos()
+      })
+    },
+    async requestData(type) {
+      try {
+        const newData = await this.ajaxGet(/* url */)
+        if (type === 'load') {
+          this.dataList = newData.concat(this.dataList)
+        } else {
+          this.dataList = newData
+        }
+      } catch (err) {
+        // handle err
+        console.log(err)
+      }
+    },
+    ajaxGet(/* url */) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const dataList = new Array(BASE)
+          resolve(dataList)
+        }, REQUEST_TIME)
+      })
+    },
+    resetPullupPos() {
+      const pullUpEle = this.$refs.pullup
+      pullUpEle.style.transform = `translateY(0px) translateZ(0)`
+      pullUpEle.style.transition = 'transform 0.5s'
+      this.stopPullup = false
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.pullup-down-slide-wrapper
+  height 100%
+  overflow hidden
+
+.pullup-pulldown-slide-bswrapper
+  position relative
+  height 100%
+  overflow hidden
+
+.pullup-down-list
+  padding 0
+
+.pullup-pulldown-slide-item
+  list-style none
+  // border-bottom 1px solid #ccc
+  width 100%
+  line-height 200px
+  text-align center
+  font-size 26px
+  transform translate3d(0,0,0)
+  backface-visibility hidden
+  box-sizing: border-box
+
+.pulldown-wrapper
+  position absolute
+  width 100%
+  padding 20px
+  box-sizing border-box
+  transform translateY(-100%) translateZ(0)
+  text-align center
+  color #999
+
+.pullup-wrapper
+  height 40px !important
+  padding 20px
+  text-align center
+  color #999
+.page1
+  background-color #D6EADF
+.page2
+  background-color #DDA789
+.page3
+  background-color #C3D899
+.page0
+  background-color #F2D4A7
+</style>

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="pullup-down">
+    <div
+      class="pullup-down-bswrapper"
+      ref="bsWrapper"
+    >
+      <div class="pulldown-scroller">
+        <div class="pulldown-wrapper">
+          <div v-show="beforePullDown">
+            <span>Pull Down and refresh</span>
+          </div>
+          <div v-show="!beforePullDown">
+            <div v-show="isPullingDown">
+              <span>Loading...</span>
+            </div>
+            <div v-show="!isPullingDown">
+              <span>Refresh success</span>
+            </div>
+          </div>
+        </div>
+        <ul class="pullup-down-list">
+          <li
+            :key="idx"
+            class="pullup-down-list-item"
+            v-for="(item, idx) of dataList"
+          >{{ `I am item ${idx} ` }}</li>
+        </ul>
+        <div class="pullup-wrapper">
+          <div v-show="!isPullingUp">
+            <span>Pull Up and load</span>
+          </div>
+          <div v-show="isPullingUp">
+            <span>Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+import PullUp from '@better-scroll/pull-up'
+
+BScroll.use(PullDown)
+BScroll.use(PullUp)
+
+const BASE = 30
+const TIME_BOUNCE = 800
+const REQUEST_TIME = 3000
+const THRESHOLD = 70
+const STOP = 56
+
+export default {
+  data() {
+    return {
+      beforePullDown: true,
+      isPullingDown: false,
+      isPullingUp: false,
+      dataList: new Array(BASE)
+    }
+  },
+  created() {
+    this.bscroll = null
+  },
+  mounted() {
+    this.initBscroll()
+  },
+  methods: {
+    initBscroll() {
+      this.bscroll = new BScroll(this.$refs.bsWrapper, {
+        scrollY: true,
+        bounceTime: TIME_BOUNCE,
+        // pullDown options
+        pullDownRefresh: {
+          threshold: THRESHOLD,
+          stop: STOP
+        },
+        // pullUp options
+        pullUpLoad: {
+          threshold: THRESHOLD
+        }
+      })
+      // listening evnets
+      this.bscroll.on('pullingDown', this.pullingDownHandler)
+      this.bscroll.on('pullingUp', this.pullingUpHandler)
+      this.bscroll.on('scroll', this.scrollHandler)
+    },
+    // scroll event handler
+    scrollHandler(pos) {
+      console.log(pos.y)
+    },
+    // pullingDown event handler
+    async pullingDownHandler() {
+      this.beforePullDown = false
+      this.isPullingDown = true
+      await this.requestData('refresh')
+      this.isPullingDown = false
+      this.$nextTick(() => {
+        this.bscroll.finishPullDown()
+        this.beforePullDown = true
+        this.bscroll.refresh()
+      })
+    },
+    // pullingUp event handler
+    async pullingUpHandler() {
+      this.isPullingUp = true
+      await this.requestData('load')
+      this.isPullingUp = false
+      this.$nextTick(() => {
+        this.bscroll.finishPullUp()
+        this.bscroll.refresh()
+      })
+    },
+    async requestData(type) {
+      try {
+        const newData = await this.ajaxGet(/* url */)
+        if (type === 'load') {
+          this.dataList = newData.concat(this.dataList)
+        } else {
+          this.dataList = newData
+        }
+      } catch (err) {
+        // handle err
+        console.log(err)
+      }
+    },
+    ajaxGet(/* url */) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const dataList = new Array(BASE)
+          resolve(dataList)
+        }, REQUEST_TIME)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.pullup-down
+  height 100%
+
+.pullup-down-bswrapper
+  position relative
+  height 100%
+  padding 0 10px
+  border 1px solid #ccc
+  overflow hidden
+
+.pullup-down-list
+  padding 0
+
+.pullup-down-list-item
+  padding 10px 0
+  list-style none
+  border-bottom 1px solid #ccc
+
+.pulldown-wrapper
+  position absolute
+  width 100%
+  padding 20px
+  box-sizing border-box
+  transform translateY(-100%) translateZ(0)
+  text-align center
+  color #999
+
+.pullup-wrapper
+  padding 20px
+  text-align center
+  color #999
+</style>

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <div ref="outerScroll" class="outer-wrapper">
+      <div class="outer-content">
+        <ul>
+          <li class="outer-list-item" v-for="(item, index) in items1" :key="index">{{item}}</li>
+        </ul>
+        <div ref="innerScroll" class="inner-wrapper">
+          <div class="slide-banner-content">
+          <div class="slide-item page1">page 1</div>
+          <div class="slide-item page2">page 2</div>
+          <div class="slide-item page3">page 3</div>
+          <div class="slide-item page4">page 4</div>
+        </div>
+        </div>
+        <ul>
+          <li class="outer-list-item" v-for="(item, index) in items1" :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'
+import Slide from '@better-scroll/slide'
+
+BScroll.use(NestedScroll)
+BScroll.use(Slide)
+
+const _data1 = [
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ ',
+  '🙂 🤔 😄 🤨  😐 🙃 ',
+  '👆🏻 outer scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ '
+]
+
+const _data2 = [
+  'The Mountain top of Inner',
+  '😀 😁 😂 🤣 😃 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙂 🤔 😄 🤨 😐 🙃 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '😔 😕 🙃 🤑 😲 ☹️ ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐣 🐣 🐣 🐣 🐣 🐣 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🐥 🐥 🐥 🐥 🐥 🐥 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🤓 🤓 🤓 🤓 🤓 🤓 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🦔 🦔 🦔 🦔 🦔 🦔 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🙈 🙈 🙈 🙈 🙈 🙈 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '🚖 🚖 🚖 🚖 🚖 🚖 ',
+  '👆🏻 inner scroll 👇🏻 ',
+  '✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ',
+  'The Mountain foot of Inner',
+]
+
+export default {
+  data() {
+    return {
+      items1: _data1,
+      items2: _data2
+    }
+  },
+  mounted () {
+    this.initBScroll()
+  },
+  beforeDestroy () {
+    this.outerScroll.destroy()
+    this.innerScroll.destroy()
+  },
+  methods: {
+    initBScroll () {
+      // outer
+      this.outerScroll = new BScroll(this.$refs.outerScroll, {
+        nestedScroll: {
+          groupId: 'slide-nested'
+        }
+      })
+      // inner
+      this.innerScroll = new BScroll(this.$refs.innerScroll, {
+        nestedScroll: {
+          groupId: 'slide-nested'
+        },
+        scrollX: true,
+        scrollY: false,
+        momentum: false,
+        // close bounce effects
+        bounce: {
+          top: false,
+          bottom: false
+        },
+        slide: {
+          loop: true,
+          autoplay: false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.container
+  height: 100%
+.outer-wrapper
+.inner-wrapper
+  
+  border-radius: 5px
+  transform: rotate(0deg)
+  position: relative
+  overflow: hidden
+  box-sizing: border-box
+.outer-wrapper
+  height: 100%
+  border: 1px solid rgba(0, 0, 0, .1)
+  border: 1px solid #62B791
+.inner-wrapper
+  height: 200px
+
+.outer-list-item
+  height: 40px
+  line-height: 40px
+  text-align: center
+  list-style: none
+
+.slide-banner-content
+  height 200px
+  white-space nowrap
+  width: 100%
+  font-size 0
+  .slide-item
+    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
+</style>

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="core-container">
+    <div class="scroll-wrapper" ref="scroll">
+      <div class="scroll-content">
+        <div class="scroll-item" v-for="(item, index) in emojis" :key="index" @click="clickHandler(item)">{{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, {
+          probeType: 3,
+          click: true
+        })
+        this.bs.on('scrollStart', () => {
+          console.log('scrollStart-')
+        })
+        this.bs.on('scroll', ({ y }) => {
+          console.log('scrolling-')
+        })
+        this.bs.on('scrollEnd', (pos) => {
+          console.log(pos)
+        })
+      },
+      clickHandler (item) {
+        window.alert(item)
+      }
+    }
+  }
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+
+.core-container
+  .scroll-wrapper
+    height 400px
+    position relative
+    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
+</style>