cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/picker/one-column.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="container">
+    <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'
+  BScroll.use(Wheel)
+
+  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 WHEEL_INDEX_CHANGED = 'wheelIndexChanged'
+
+  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 bs is scrolling, force it stop at the nearest wheel-item
+         * or you can use 'restorePosition' method as the below
+        */
+        this.wheel.stop()
+        /*
+         * if bs is scrolling, restore it to the start position
+         * it is same with iOS picker and web Select element implementation
+         * supported at v2.1.0
+        */
+        // this.wheel.restorePosition()
+
+        this.hide()
+        const currentSelectedIndex = this.selectedIndex = this.wheel.getSelectedIndex()
+        this.selectedText = `${this.pickerData[currentSelectedIndex].text}-${currentSelectedIndex}`
+        this.$emit(EVENT_SELECT, currentSelectedIndex)
+      },
+      _cancel() {
+        /*
+         * if bs is scrolling, restore it to the start position
+         * it is same with iOS picker and web Select element implementation
+         * supported at v2.1.0
+        */
+        this.wheel.restorePosition()
+        this.hide()
+        this.$emit(EVENT_CANCEL)
+      },
+      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)
+          })
+        }
+      },
+      hide() {
+        this.state = STATE_HIDE
+      },
+      _createWheel(wheelWrapper) {
+        if (!this.wheel) {
+          this.wheel = new BScroll(wheelWrapper, {
+            wheel: {
+              selectedIndex: this.selectedIndex,
+              wheelWrapperClass: 'wheel-scroll',
+              wheelItemClass: 'wheel-item',
+              wheelDisabledItemClass: 'wheel-disabled-item'
+            },
+            useTransition: false,
+            probeType: 3
+          })
+          // < v2.1.0
+          this.wheel.on('scrollEnd', () => {
+            this.$emit(EVENT_CHANGE, this.wheel.getSelectedIndex())
+          })
+          // v2.1.0, only when selectedIndex changed
+          this.wheel.on(WHEEL_INDEX_CHANGED, (index) => {
+            console.log(index)
+          })
+        } else {
+          this.wheel.refresh()
+        }
+        return this.wheel
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+
+  /* reset */
+  ul
+    list-style none
+    padding 0
+
+  .border-bottom-1px, .border-top-1px
+    position: relative
+    &:before, &:after
+      content: ""
+      display: block
+      position: absolute
+      transform-origin: 0 0
+  .border-bottom-1px
+    &:after
+      border-bottom: 1px solid #ebebeb
+      left: 0
+      bottom: 0
+      width: 100%
+      transform-origin: 0 bottom
+  .border-top-1px
+    &:before
+      border-top: 1px solid #ebebeb
+      left: 0
+      top: 0
+      width: 100%
+      transform-origin: 0 top
+  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
+    .border-top-1px
+      &:before
+        width: 200%
+        transform: scale(.5) translateZ(0)
+    .border-bottom-1px
+      &:after
+        width: 200%
+        transform: scale(.5) translateZ(0)
+
+  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
+    .border-top-1px
+      &:before
+        width: 300%
+        transform: scale(.333) translateZ(0)
+    .border-bottom-1px
+      &:after
+        width: 300%
+        transform: scale(.333) translateZ(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
+          flex: 1
+          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/pulldown/default.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="pulldown">
+    <div
+      class="pulldown-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="pulldown-list">
+          <li
+            :key="i"
+            class="pulldown-list-item"
+            v-for="i of dataList"
+          >{{ `I am item ${i} ` }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+
+BScroll.use(PullDown)
+
+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 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.bsWrapper, {
+        scrollY: true,
+        bounceTime: TIME_BOUNCE,
+        useTransition: false,
+        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() {
+      this.bscroll.finishPullDown()
+      setTimeout(() => {
+        this.beforePullDown = true
+        this.bscroll.refresh()
+      }, TIME_BOUNCE + 100)
+    },
+    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>
+.pulldown
+  height 100%
+
+.pulldown-bswrapper
+  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-wrapper
+  position absolute
+  width 100%
+  padding 20px
+  box-sizing border-box
+  transform translateY(-100%) translateZ(0)
+  text-align center
+  color #999
+</style>

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/components/pulldown/sina-weibo.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="pulldown-sina">
+    <div
+      class="pulldown-bswrapper"
+      ref="bsWrapper"
+    >
+      <div class="pulldown-scroller">
+        <div class="pulldown-wrapper">
+          <div v-html="tipText"></div>
+        </div>
+        <ul class="pulldown-list">
+          <li
+            :key="i"
+            class="pulldown-list-item"
+            v-for="i of dataList"
+          >{{ `I am item ${i} ` }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core'
+import PullDown from '@better-scroll/pull-down'
+
+BScroll.use(PullDown)
+
+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
+}
+
+// pulldownRefresh state
+const PHASE = {
+  moving: {
+    enter: 'enter',
+    leave: 'leave'
+  },
+  fetching: 'fetching',
+  succeed: 'succeed'
+}
+const TIME_BOUNCE = 800
+const REQUEST_TIME = 2000
+const THRESHOLD = 70
+const STOP = 56
+let STEP = 0
+const ARROW_BOTTOM = '<svg width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M367.997 338.75l-95.998 95.997V17.503h-32v417.242l-95.996-95.995l-22.627 22.627L256 496l134.624-134.623l-22.627-22.627z"></path></svg>'
+const ARROW_UP = '<svg width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M390.624 150.625L256 16L121.376 150.625l22.628 22.627l95.997-95.998v417.982h32V77.257l95.995 95.995l22.628-22.627z"></path></svg>'
+
+export default {
+  data() {
+    return {
+      tipText: '',
+      isPullingDown: false,
+      dataList: generateData()
+    }
+  },
+  mounted() {
+    this.initBscroll()
+  },
+  methods: {
+    initBscroll() {
+      this.bscroll = new BScroll(this.$refs.bsWrapper, {
+        scrollY: true,
+        bounceTime: TIME_BOUNCE,
+        useTransition: false,
+        pullDownRefresh: {
+          threshold: THRESHOLD,
+          stop: STOP
+        }
+      })
+
+      this.bscroll.on('pullingDown', this.pullingDownHandler)
+      this.bscroll.on('scrollEnd', e => {
+        console.log('scrollEnd')
+      })
+      // v2.4.0 supported
+      this.bscroll.on('enterThreshold', () => {
+        this.setTipText(PHASE.moving.enter)
+      })
+      this.bscroll.on('leaveThreshold', () => {
+        this.setTipText(PHASE.moving.leave)
+      })
+    },
+    async pullingDownHandler() {
+      this.setTipText(PHASE.fetching)
+      STEP += 1
+      await this.getData()
+
+      this.setTipText(PHASE.succeed)
+      // tell BetterScroll to finish pull down
+      this.bscroll.finishPullDown()
+      // waiting for BetterScroll's bounceAnimation then refresh size
+      setTimeout(() => {
+        this.bscroll.refresh()
+      }, TIME_BOUNCE + 50)
+    },
+    async getData() {
+      const newData = await this.mockFetchData()
+      this.dataList = newData.concat(this.dataList)
+    },
+    mockFetchData() {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const dataList = generateData()
+          resolve(dataList)
+        }, REQUEST_TIME)
+      })
+    },
+    setTipText(phase = PHASE.default) {
+      const TEXTS_MAP = {
+        'enter': `${ARROW_BOTTOM} Pull down`,
+        'leave': `${ARROW_UP} Release`,
+        'fetching': 'Loading...',
+        'succeed': 'Refresh succeed'
+      }
+      this.tipText = TEXTS_MAP[phase]
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.pulldown-sina
+  height 100%
+
+.pulldown-bswrapper
+  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-wrapper
+  position absolute
+  width 100%
+  padding 20px
+  box-sizing border-box
+  transform translateY(-100%) translateZ(0)
+  text-align center
+  color #999
+</style>