cbvirtua 1.0.105 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/examples/static/css/stylesheet.css

@@ -0,0 +1,241 @@
+* {
+  box-sizing: border-box; }
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #fff;
+  color: #606c71; }
+
+a {
+  color: #1e6bb8;
+  text-decoration: none; }
+  a:hover {
+    text-decoration: underline; }
+
+.btn {
+  display: inline-block;
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.3rem;
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
+  .btn + .btn {
+    margin-left: 1rem; }
+
+.btn:hover {
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3); }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .btn {
+    font-size: 0.9rem; } }
+
+@media screen and (max-width: 42em) {
+  .btn {
+    display: block;
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 0.9rem; }
+    .btn + .btn {
+      margin-top: 1rem;
+      margin-left: 0; } }
+
+.page-header {
+  color: #fff;
+  text-align: center;
+  font-family: 'Patrick Hand', cursive;
+  background-color: rgba(39,80,255, .7)}
+
+@media screen and (min-width: 64em) {
+  .page-header {
+    padding: 1.5rem 6rem 3rem 6rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .page-header {
+    padding: 1.5rem 4rem 2rem 4rem; } }
+
+@media screen and (max-width: 42em) {
+  .page-header {
+    padding: 1.5rem 1rem 1rem 1rem; } }
+
+.project-name {
+  margin-top: 0;
+  margin-bottom: 0.1rem; }
+
+@media screen and (min-width: 64em) {
+  .project-name {
+    font-size: 3.25rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .project-name {
+    font-size: 2.25rem; } }
+
+@media screen and (max-width: 42em) {
+  .project-name {
+    font-size: 1.75rem; } }
+
+.project-tagline {
+  margin-bottom: 1rem;
+  font-weight: normal;
+  opacity: 0.7; }
+
+@media screen and (min-width: 64em) {
+  .project-tagline {
+    font-size: 1.25rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .project-tagline {
+    font-size: 1.15rem; } }
+
+@media screen and (max-width: 42em) {
+  .project-tagline {
+    font-size: 1rem; } }
+
+.main-content :first-child {
+  margin-top: 0; }
+.main-content img {
+  max-width: 100%; }
+.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
+  margin-top: 1rem;
+  margin-bottom: 1rem; }
+.main-content code {
+  padding: 2px 4px;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 0.9rem;
+  color: #383e41;
+  background-color: #f3f6fa;
+  border-radius: 0.3rem; }
+.main-content pre {
+  padding: 0.8rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  color: #567482;
+  word-wrap: normal;
+  background-color: #f3f6fa;
+  border: solid 1px #dce6f0;
+  border-radius: 0.3rem; }
+  .main-content pre > code {
+    padding: 0;
+    margin: 0;
+    font-size: 0.9rem;
+    color: #567482;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0; }
+.main-content .highlight {
+  margin-bottom: 1rem; }
+  .main-content .highlight pre {
+    margin-bottom: 0;
+    word-break: normal; }
+.main-content .highlight pre, .main-content pre {
+  padding: 0.8rem;
+  overflow: auto;
+  font-size: 0.9rem;
+  line-height: 1.45;
+  border-radius: 0.3rem; }
+.main-content pre code, .main-content pre tt {
+  display: inline;
+  max-width: initial;
+  padding: 0;
+  margin: 0;
+  overflow: initial;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0; }
+  .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
+    content: normal; }
+.main-content ul, .main-content ol {
+  margin-top: 0; }
+.main-content blockquote {
+  padding: 0 1rem;
+  margin-left: 0;
+  color: #819198;
+  border-left: 0.3rem solid #dce6f0; }
+  .main-content blockquote > :first-child {
+    margin-top: 0; }
+  .main-content blockquote > :last-child {
+    margin-bottom: 0; }
+.main-content table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+  word-break: normal;
+  word-break: keep-all; }
+  .main-content table th {
+    font-weight: bold; }
+  .main-content table th, .main-content table td {
+    padding: 0.5rem 1rem;
+    border: 1px solid #e9ebec; }
+.main-content dl {
+  padding: 0; }
+  .main-content dl dt {
+    padding: 0;
+    margin-top: 1rem;
+    font-size: 1rem;
+    font-weight: bold; }
+  .main-content dl dd {
+    padding: 0;
+    margin-bottom: 1rem; }
+.main-content hr {
+  height: 2px;
+  padding: 0;
+  margin: 1rem 0;
+  background-color: #eff0f1;
+  border: 0; }
+
+@media screen and (min-width: 64em) {
+  .main-content {
+    padding: 2rem 8rem;
+    margin: 0 auto;
+    font-size: 1.1rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .main-content {
+    padding: 2rem 2rem;
+    font-size: 1.1rem; } }
+
+@media screen and (max-width: 42em) {
+  .main-content {
+    padding: 1rem 1rem 2rem 1rem;
+    font-size: 1rem; }
+  iframe {
+    display: none
+  }
+}
+
+.site-footer {
+  padding-top: 2rem;
+  margin-top: 2rem;
+  border-top: solid 1px #d7d7d7; }
+
+.site-footer-owner {
+  display: block;
+  font-weight: bold; }
+
+.site-footer-credits {
+  color: #819198; }
+
+@media screen and (min-width: 64em) {
+  .site-footer {
+    font-size: 1rem; } }
+
+@media screen and (min-width: 42em) and (max-width: 64em) {
+  .site-footer {
+    font-size: 1rem; } }
+
+@media screen and (max-width: 42em) {
+  .site-footer {
+    font-size: 0.9rem; } }

package/better-scroll-dev/better-scroll-dev/packages/examples/vue/App.vue

@@ -0,0 +1,173 @@
+<template>
+  <div id="app">
+    <section class="page-header">
+      <h1 class="project-name">BetterScroll</h1>
+      <h2 class="project-tagline">inspired by iscroll, and it has a better scroll perfermance</h2>
+    </section>
+    <section class="main-content">
+      <div class="example">
+        <ul class="example-list">
+          <li
+            :key="index"
+            @click="goPage(item.path)"
+            class="example-item"
+            v-for="(item, index) in examples"
+          >
+            <span>{{item.name}}</span>
+          </li>
+          <li class="example-item placeholder"></li>
+        </ul>
+      </div>
+    </section>
+    <transition name="move">
+      <router-view class="view"></router-view>
+    </transition>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+const examples = [
+  {
+    name: 'core scroll',
+    path: '/core/'
+  },
+  {
+    name: 'observe-dom',
+    path: '/observe-dom/'
+  },
+  {
+    name: 'observe-image',
+    path: '/observe-image/'
+  },
+  {
+    name: 'slide',
+    path: '/slide/'
+  },
+  {
+    name: 'zoom',
+    path: '/zoom/'
+  },
+  {
+    name: 'picker',
+    path: '/picker/'
+  },
+  {
+    name: 'pullup',
+    path: '/pullup/'
+  },
+  {
+    name: 'pulldown',
+    path: '/pulldown/'
+  },
+  {
+    name: 'scrollbar',
+    path: '/scrollbar/'
+  },
+  {
+    name: 'indicators',
+    path: '/indicators/'
+  },
+  {
+    name: 'infinity',
+    path: '/infinity/'
+  },
+  {
+    name: 'form',
+    path: '/form/'
+  },
+  {
+    name: 'nested-scroll',
+    path: '/nested-scroll/'
+  },
+  {
+    name: 'mouse-wheel',
+    path: '/mouse-wheel/'
+  },
+  {
+    name: 'movable',
+    path: '/movable/'
+  },
+  {
+    name: 'compose plugins',
+    path: '/compose/'
+  }
+]
+export default {
+  data() {
+    return {
+      examples
+    }
+  },
+  methods: {
+    goPage(path) {
+      this.$router.push(path)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+.page-header
+  h1
+    @media screen and (min-width 42rem)
+      margin-bottom 1rem
+
+    @media screen and (max-width 42rem)
+      margin-bottom 0.5rem
+
+.main-content
+  .site-footer
+    text-align center
+
+    @media screen and (max-width 42rem)
+      margin-top -1rem
+
+.example-list
+  display flex
+  justify-content space-between
+  flex-wrap wrap
+
+  @media screen and (min-width 42rem)
+    margin 2rem 0 2rem 0
+
+  @media screen and (max-width 42rem)
+    margin 1rem 0
+
+  .example-item
+    background-color white
+    padding 0.8rem
+    border 1px solid rgba(0, 0, 0, 0.1)
+    box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.1)
+    text-align center
+    margin-bottom 1rem
+
+    &.placeholder
+      visibility hidden
+      height 0
+      margin 0
+      padding 0
+
+    @media screen and (min-width 42rem)
+      flex 0 1 28%
+
+    @media screen and (max-width 42rem)
+      flex 0 1 100%
+      margin-bottom 1rem
+
+.view
+  position fixed
+  top 0
+  left 0
+  bottom 0
+  right 0
+  z-index 1
+  padding 20px
+  background white
+  transform translate3d(0, 0, 0)
+
+  &.move-enter, &.move-leave-active
+    transform translate3d(100%, 0, 0)
+
+  &.move-enter-active, &.move-leave-active
+    transition transform 0.3s
+</style>

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

@@ -0,0 +1,247 @@
+<template>
+  <div class="container">
+    <div ref="outerScroll" class="outer-wrapper">
+      <div class="outer-content">
+        <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>
+          <li class="outer-list-item" v-for="(item, index) in topOutItems" :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 innerItems" :key="index">{{item}}</li>
+          </ul>
+        </div>
+        <ul>
+          <li class="outer-list-item2" v-for="(item, index) in bottomOutItems" :key="index">{{item}}</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 type="text/ecmascript-6">
+import BScroll from '@better-scroll/core'
+import NestedScroll from '@better-scroll/nested-scroll'
+import PullUp from '@better-scroll/pull-up'
+import PullDown from '@better-scroll/pull-down'
+
+BScroll.use(NestedScroll)
+BScroll.use(PullUp)
+BScroll.use(PullDown)
+
+const _data1 = [
+  '😀  😁   😂  🤣   😃  🙃',
+  '👆🏻 Pull Down and refresh👆🏻',
+  '🙂  🤔   😄  🤨   😐  🙃',
+  '👆🏻 Pull Down and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️',
+  '🙂  🤔  😄  🤨   😐  🙃 ',
+  '👆🏻 Pull Down and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️ '
+]
+
+const _data2 = [
+  '😀  😁   😂  🤣   😃  🙃',
+  '👆🏻 Pull Up and refresh👆🏻',
+  '🙂  🤔   😄  🤨   😐  🙃',
+  '👆🏻 Pull Up and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️',
+  '🙂  🤔  😄  🤨   😐  🙃 ',
+  '👆🏻 Pull Up and refresh👆🏻',
+  '😔  😕   🙃  🤑   😲  ☹️ '
+]
+
+const _data3 = [
+  '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',
+]
+
+const TIME_BOUNCE = 800
+const REQUEST_TIME = 3000
+const THRESHOLD = 70
+const STOP = 56
+
+export default {
+  data() {
+    return {
+      topOutItems: _data1,
+      bottomOutItems:_data2,
+      innerItems: _data3,
+      beforePullDown: true,
+      isPullingDown: false,
+      isPullingUp: false,
+    }
+  },
+  mounted () {
+    this.initBScroll()
+  },
+  methods: {
+    initBScroll () {
+      // outer
+      this.outerScroll = new BScroll(this.$refs.outerScroll, {
+        nestedScroll: {
+          groupId: 'pullup-pullldown'
+        },
+        bounceTime:TIME_BOUNCE,
+        // pullDown options
+        pullDownRefresh: {
+          threshold: THRESHOLD,
+          stop: STOP
+        },
+        // pullUp options
+        pullUpLoad: {
+          threshold: THRESHOLD
+        }
+      })
+      // inner
+      this.innerScroll = new BScroll(this.$refs.innerScroll, {
+        nestedScroll: {
+          groupId: 'pullup-pullldown'
+        },
+        // close bounce effects
+        bounce: {
+          top: false,
+          bottom: false
+        }
+      })
+      this.outerScroll.on('pullingDown', this.pullingDownHandler)
+      this.outerScroll.on('pullingUp', this.pullingUpHandler)
+      this.outerScroll.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.outerScroll.finishPullDown()
+        this.beforePullDown = true
+        this.outerScroll.refresh()
+      })
+    },
+    // pullingUp event handler
+    async pullingUpHandler() {
+      this.isPullingUp = true
+      await this.requestData('load')
+      this.isPullingUp = false
+      this.$nextTick(() => {
+        this.outerScroll.finishPullUp()
+        this.outerScroll.refresh()
+      })
+    },
+    async requestData(type) {
+      try {
+        const {topOutItems, bottomOutItems} = await this.ajaxGet(/* url */)
+        if (type === 'load') {
+          this.bottomOutItems = this.bottomOutItems.concat(bottomOutItems)
+        } else {
+          this.topOutItems = topOutItems
+          this.bottomOutItems = bottomOutItems
+        }
+      } catch(err) {
+        console.log(err)
+      }
+    },
+    ajaxGet(/* url */) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            topOutItems: _data1,
+            bottomOutItems: _data2
+          })
+        }, REQUEST_TIME)
+      })
+    }
+  }
+}
+</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-item2,
+.outer-list-item
+  height: 40px
+  line-height: 40px
+  text-align: center
+  list-style: none
+
+.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>