cbvirtua 1.0.109 → 1.0.115

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

@@ -1,55 +0,0 @@
-<template>
-  <div class="mouse-wheel-horizontal-scroll">
-    <div class="mouse-wheel-wrapper" ref="scroll">
-      <div class="mouse-wheel-content">
-        <div class="mouse-wheel-item" v-for="n in 100" :key="n">{{n}}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  import BScroll from '@better-scroll/core'
-  import MouseWheel from '@better-scroll/mouse-wheel'
-
-  BScroll.use(MouseWheel)
-
-  export default {
-    mounted() {
-      this.init()
-    },
-    methods: {
-      init() {
-        this.bs = new BScroll(this.$refs.scroll, {
-          scrollX: true,
-          scrollY: false,
-          mouseWheel: true
-        })
-      }
-    }
-  }
-</script>
-<style lang="stylus" scoped>
-
-.mouse-wheel-horizontal-scroll
-  .mouse-wheel-wrapper
-    width 90%
-    margin 80px auto
-    white-space nowrap
-    border 3px solid #42b983
-    border-radius 5px
-    overflow hidden
-    .mouse-wheel-content
-      display inline-block
-      .mouse-wheel-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
-</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/mouse-wheel/horizontal-slide.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="mouse-wheel-horizontal-slide">
-    <div class="slide-container">
-      <div class="slide-wrapper" ref="slide">
-        <div class="slide-content">
-          <div class="slide-page page1">page 1</div>
-          <div class="slide-page page2">page 2</div>
-          <div class="slide-page page3">page 3</div>
-          <div class="slide-page page4">page 4</div>
-        </div>
-      </div>
-      <div class="dots-wrapper">
-        <span
-          class="dot"
-          v-for="(item, index) in 4"
-          :key="index"
-          :class="{'active': currentPageIndex === index}"></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  import BScroll from '@better-scroll/core'
-  import Slide from '@better-scroll/slide'
-  import MouseWheel from '@better-scroll/mouse-wheel'
-
-  BScroll.use(Slide)
-  BScroll.use(MouseWheel)
-
-  export default {
-    data() {
-      return {
-        currentPageIndex: 0
-      }
-    },
-    mounted() {
-      this.init()
-    },
-    beforeDestroy() {
-      this.slide.destroy()
-    },
-    methods: {
-      init() {
-        this.slide = new BScroll(this.$refs.slide, {
-          scrollX: true,
-          scrollY: false,
-          slide: {
-            loop: true,
-            threshold: 100
-          },
-          useTransition: false,
-          momentum: false,
-          bounce: false,
-          stopPropagation: true,
-          mouseWheel: {
-            speed: 2,
-            invert: false,
-            easeTime: 300
-          }
-        })
-        this.slide.on('scrollEnd', this._onScrollEnd)
-      },
-      _onScrollEnd() {
-        let pageIndex = this.slide.getCurrentPage().pageX
-        this.currentPageIndex = pageIndex
-      }
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-
-.mouse-wheel-horizontal-slide
-  .slide-container
-    position relative
-  .slide-wrapper
-    min-height 1px
-    overflow hidden
-  .slide-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
-
-</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/mouse-wheel/picker.vue

@@ -1,301 +0,0 @@
-<template>
-  <div class="mouse-wheel-picker">
-    <ul class="example-list">
-      <li class="example-item" @click="show">
-          <span class="open">{{selectedText}}</span>
-      </li>
-    </ul>
-    <transition name="picker-fade">
-      <div class="picker" v-show="state===1" @touchmove.prevent @click="_cancel">
-        <transition name="picker-move">
-          <div class="picker-panel" v-show="state===1" @click.stop>
-            <div class="picker-choose border-bottom-1px">
-              <span class="cancel" @click="_cancel">Cancel</span>
-              <span class="confirm" @click="_confirm">Confirm</span>
-              <h1 class="picker-title">Title</h1>
-            </div>
-            <div class="picker-content">
-              <div class="mask-top border-bottom-1px"></div>
-              <div class="mask-bottom border-top-1px"></div>
-              <div class="wheel-wrapper" ref="wheelWrapper">
-                <div class="wheel">
-                  <ul class="wheel-scroll">
-                    <li
-                      v-for="(item, index) in pickerData" :key="index"
-                      :class="{'wheel-disabled-item':item.disabled}"
-                      class="wheel-item">{{item.text}}</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <div class="picker-footer"></div>
-          </div>
-        </transition>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  import BScroll from '@better-scroll/core'
-  import Wheel from '@better-scroll/wheel'
-  import MouseWheel from '@better-scroll/mouse-wheel'
-  BScroll.use(Wheel)
-  BScroll.use(MouseWheel)
-
-  const STATE_HIDE = 0
-  const STATE_SHOW = 1
-
-  const COMPONENT_NAME = 'picker'
-  const EVENT_SELECT = 'select'
-  const EVENT_CANCEL = 'cancel'
-  const EVENT_CHANGE = 'change'
-
-  const DATA = [
-    {
-      text: 'Venomancer',
-      value: 1,
-      disabled: 'wheel-disabled-item'
-    }, {
-      text: 'Nerubian Weaver',
-      value: 2
-    },
-    {
-      text: 'Spectre',
-      value: 3
-    },
-    {
-      text: 'Juggernaut',
-      value: 4
-    },
-    {
-      text: 'Karl',
-      value: 5
-    },
-    {
-      text: 'Zeus',
-      value: 6
-    },
-    {
-      text: 'Witch Doctor',
-      value: 7
-    }, {
-      text: 'Lich',
-      value: 8
-    },
-    {
-      text: 'Oracle',
-      value: 9
-    },
-    {
-      text: 'Earthshaker',
-      value: 10
-    }
-  ]
-
-  export default {
-    name: COMPONENT_NAME,
-    data() {
-      return {
-        state: STATE_HIDE,
-        selectedIndex: 2,
-        selectedText: 'open',
-        pickerData: DATA
-      }
-    },
-    methods: {
-      _confirm() {
-        if (this._isMoving()) {
-          return
-        }
-        this.hide()
-
-        const currentSelectedIndex = this.wheel.getSelectedIndex()
-        this.selectedIndex = currentSelectedIndex
-        this.selectedText = this.pickerData[this.selectedIndex].text
-        this.$emit(EVENT_SELECT, currentSelectedIndex)
-      },
-      _cancel() {
-        this.hide()
-        this.$emit(EVENT_CANCEL)
-      },
-      _isMoving() {
-        return this.wheel.pending
-      },
-      show() {
-        if (this.state === STATE_SHOW) {
-          return
-        }
-        this.state = STATE_SHOW
-        if (!this.wheel) {
-          // waiting for DOM rendered
-          this.$nextTick(() => {
-            const wrapper = this.$refs.wheelWrapper.children[0]
-            this._createWheel(wrapper)
-          })
-        } else {
-          this.wheel.enable()
-          this.wheel.wheelTo(this.selectedIndex)
-        }
-      },
-      hide() {
-        this.state = STATE_HIDE
-        // if wheel is in animation, clear timer in it
-        this.wheel.disable()
-      },
-      refresh() {
-        this.$nextTick(() => {
-          this.wheel.refresh()
-        })
-      },
-      _createWheel(wheelWrapper) {
-        if (!this.wheel) {
-          this.wheel = new BScroll(wheelWrapper, {
-            mouseWheel: true,
-            wheel: {
-              selectedIndex: this.selectedIndex,
-              wheelWrapperClass: 'wheel-scroll',
-              wheelItemClass: 'wheel-item',
-              wheelDisabledItemClass: 'wheel-disabled-item'
-            },
-            probeType: 3,
-            useTransition: true,
-          })
-          this.wheel.on('scrollEnd', () => {
-            this.$emit(EVENT_CHANGE, this.wheel.getSelectedIndex())
-          })
-        } else {
-          this.wheel.refresh()
-        }
-        return this.wheel
-      }
-    }
-  }
-</script>
-
-<style scoped lang="stylus" rel="stylesheet/stylus">
-
-  /* reset */
-  ul
-    list-style none
-    padding 0
-
-  .example-list
-    display: flex
-    justify-content: space-between
-    flex-wrap: wrap
-    margin: 2rem
-
-    .example-item
-      background-color white
-      padding: 0.8rem
-      border: 1px solid rgba(0, 0, 0, .1)
-      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1)
-      text-align: center
-      margin-bottom: 1rem
-      flex: 1
-      &.placeholder
-        visibility: hidden
-        height: 0
-        margin: 0
-        padding: 0
-
-  .picker
-    position: fixed
-    left: 0
-    top: 0
-    z-index: 100
-    width: 100%
-    height: 100%
-    overflow: hidden
-    text-align: center
-    font-size: 14px
-    background-color: rgba(37, 38, 45, .4)
-    &.picker-fade-enter, &.picker-fade-leave-active
-      opacity: 0
-    &.picker-fade-enter-active, &.picker-fade-leave-active
-      transition: all .3s ease-in-out
-
-    .picker-panel
-      position: absolute
-      z-index: 600
-      bottom: 0
-      width: 100%
-      height: 273px
-      background: white
-      &.picker-move-enter, &.picker-move-leave-active
-        transform: translate3d(0, 273px, 0)
-      &.picker-move-enter-active, &.picker-move-leave-active
-        transition: all .3s ease-in-out
-      .picker-choose
-        position: relative
-        height: 60px
-        color: #999
-        .picker-title
-          margin: 0
-          line-height: 60px
-          font-weight: normal
-          text-align: center
-          font-size: 18px
-          color: #333
-        .confirm, .cancel
-          position: absolute
-          top: 6px
-          padding: 16px
-          font-size: 14px
-        .confirm
-          right: 0
-          color: #007bff
-          &:active
-            color: #5aaaff
-        .cancel
-          left: 0
-          &:active
-            color: #c2c2c2
-      .picker-content
-        position: relative
-        top: 20px
-        .mask-top, .mask-bottom
-          z-index: 10
-          width: 100%
-          height: 68px
-          pointer-events: none
-          transform: translateZ(0)
-        .mask-top
-          position: absolute
-          top: 0
-          background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
-        .mask-bottom
-          position: absolute
-          bottom: 1px
-          background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
-      .wheel-wrapper
-        display: flex
-        padding: 0 16px
-        .wheel
-          -ms-flex: 1 1 0.000000001px
-          -webkit-box-flex: 1
-          -webkit-flex: 1
-          flex: 1
-          -webkit-flex-basis: 0.000000001px
-          flex-basis: 0.000000001px
-          width: 1%
-          height: 173px
-          overflow: hidden
-          font-size: 18px
-          .wheel-scroll
-            padding: 0
-            margin-top: 68px
-            line-height: 36px
-            list-style: none
-            .wheel-item
-              list-style: none
-              height: 36px
-              overflow: hidden
-              white-space: nowrap
-              color: #333
-              &.wheel-disabled-item
-                opacity: .2;
-    .picker-footer
-      height: 20px
-</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/mouse-wheel/pulldown.vue

@@ -1,152 +0,0 @@
-<template>
-  <div class="mouse-wheel-pulldown">
-    <div ref="scroll" class="pulldown-wrapper">
-      <div class="pulldown-content">
-        <div class="pulldown-tips">
-          <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="pulldown-list">
-          <li v-for="i of dataList" :key="i" class="pulldown-list-item">
-            {{ `I am item ${i} ` }}
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import BScroll from '@better-scroll/core'
-  import PullDown from '@better-scroll/pull-down'
-  import MouseWheel from '@better-scroll/mouse-wheel'
-
-  BScroll.use(PullDown)
-  BScroll.use(MouseWheel)
-
-  function generateData() {
-    const BASE = 30
-    const begin = BASE * STEP
-    const end = BASE * (STEP + 1)
-    let ret = []
-    for(let i = end; i > begin; i--) {
-      ret.push(i)
-    }
-    return ret
-  }
-
-  const TIME_BOUNCE = 800
-  const TIME_STOP = 600
-  const REQUEST_TIME = 1000
-  const THRESHOLD = 70
-  const STOP = 56
-  let STEP = 0
-
-  export default {
-    data() {
-      return {
-        beforePullDown: true,
-        isPullingDown: false,
-        dataList: generateData()
-      }
-    },
-    mounted() {
-      this.initBscroll()
-    },
-    methods: {
-      initBscroll() {
-        this.bscroll = new BScroll(this.$refs.scroll, {
-          scrollY: true,
-          bounceTime: TIME_BOUNCE,
-          mouseWheel: true,
-          pullDownRefresh: {
-            threshold: THRESHOLD,
-            stop: STOP
-          }
-        })
-
-        this.bscroll.on('pullingDown', this.pullingDownHandler)
-        this.bscroll.on('scroll', this.scrollHandler)
-        this.bscroll.on('scrollEnd', (e) => {
-          console.log('scrollEnd')
-        })
-      },
-      scrollHandler(pos) {
-        console.log(pos.y)
-      },
-      async pullingDownHandler() {
-        console.log('trigger pullDown')
-        this.beforePullDown = false
-        this.isPullingDown = true
-        STEP += 1
-
-        await this.requestData()
-
-        this.isPullingDown = false
-        this.finishPullDown()
-      },
-      async finishPullDown() {
-        const stopTime = TIME_STOP
-        await new Promise(resolve => {
-          setTimeout(() => {
-            this.bscroll.finishPullDown()
-            resolve()
-          }, stopTime)
-        })
-        setTimeout(() => {
-          this.beforePullDown = true
-          this.bscroll.refresh()
-        }, TIME_BOUNCE)
-      },
-      async requestData() {
-        try {
-          const newData = await this.ajaxGet(/* url */)
-          this.dataList = newData.concat(this.dataList)
-        } catch (err) {
-          // handle err
-          console.log(err)
-        }
-      },
-      ajaxGet(/* url */) {
-        return new Promise(resolve => {
-          setTimeout(() => {
-            const dataList = generateData()
-            resolve(dataList)
-          }, REQUEST_TIME)
-        })
-      }
-    }
-  }
-</script>
-
-<style lang="stylus" scoped>
-.mouse-wheel-pulldown
-  height: 100%
-  .pulldown-wrapper
-    position: relative
-    height: 100%
-    padding: 0 10px
-    border: 1px solid #ccc
-    overflow: hidden
-  .pulldown-list
-    padding: 0
-  .pulldown-list-item
-    padding: 10px 0
-    list-style: none
-    border-bottom: 1px solid #ccc
-  .pulldown-tips
-    position: absolute
-    width: 100%
-    padding: 20px
-    box-sizing: border-box
-    transform: translateY(-100%) translateZ(0)
-    text-align: center
-    color: #999
-</style>