h5-render 2.0 add more features.

html5/render/vue/components/index.js

@@ -53,6 +53,7 @@ export default {
   cell,
   scroller,
   slider,
+  cycleslider: slider,
   'slider-neighbor': neighbor,
   indicator,
   refresh,

html5/render/vue/components/scrollable/header.js

@@ -70,7 +70,7 @@ export default {
       on: createEventMap(this),
       ref: 'header',
       staticClass: 'weex-header weex-ct',
-      class: { sticky: this.sticky, iossticky: this.supportSticky },
+      class: { 'weex-sticky': this.sticky, 'weex-ios-sticky': this.supportSticky },
       staticStyle: extractComponentStyle(this)
     }, this.$slots.default)
   }

html5/render/vue/components/scrollable/list/index.js

@@ -25,13 +25,6 @@ import listMixin from './listMixin'
 export default {
   name: 'list',
   mixins: [scrollable, listMixin],
-  props: {
-    loadmoreoffset: {
-      type: [String, Number],
-      default: 0
-    }
-  },
-
   computed: {
     wrapperClass () {
       const classArray = ['weex-list', 'weex-list-wrapper', 'weex-ct']
@@ -42,9 +35,6 @@ export default {
   },
 
   methods: {
-    resetLoadmore () {
-      this._availableToFireLoadmore = true
-    },
     createChildren (h) {
       const slots = this.$slots.default || []
       this._cells = slots.filter(vnode => {

html5/render/vue/components/scrollable/scroller.js

@@ -31,15 +31,6 @@ export default {
       validator (value) {
         return ['horizontal', 'vertical'].indexOf(value) !== -1
       }
-    },
-    loadmoreoffset: {
-      type: [String, Number],
-      default: 0
-    },
-    // TODO: support loadmore retry
-    loadmoreretry: {
-      type: [String, Number],
-      default: 0
     }
   },
 
@@ -69,12 +60,6 @@ export default {
           staticClass: 'weex-scroller-inner weex-ct'
         }, this._cells)
       ]
-    },
-    scrollTo (vnode) {
-      if (vnode && vnode.$el) {
-        // TODO: add animation
-        this.$el.scrollTop = vnode.$el.offsetTop
-      }
     }
   },
 

html5/render/vue/core/style.js

@@ -23,7 +23,10 @@ import {
   extendTruthy,
   trimComment,
   normalizeStyle,
-  autoPrefix
+  autoPrefix,
+  isArray,
+  getParentScroller,
+  supportSticky
 } from '../utils'
 import { tagBegin, tagEnd } from '../utils/perf'
 /* istanbul ignore next */
@@ -230,39 +233,85 @@ export function getComponentStyle (context, extract) {
           }
         }
       })
-      delete style[k]
+      if (k !== 'position') { delete style[k] }
     }
   }
+
+  /**
+   * If position is 'sticky', then add it to the stickyChildren of the parent scroller.
+   */
+  const pos = style.position
+  const reg = /sticky$/
+  if (isArray(pos) && pos[0].match(reg) || (pos + '').match(reg)) {
+    delete style.position
+    // use native sticky.
+    if (supportSticky()) {
+      context.$nextTick(function () {
+        const el = context.$el
+        if (el) {
+          el.classList.add('weex-ios-sticky')
+        }
+      })
+    }
+    // use re-implementation of sticky.
+    else if (!context._stickyAdded) {
+      const uid = context._uid
+      const scroller = getParentScroller(context)
+      if (scroller) {
+        context._stickyAdded = true
+        if (!scroller._stickyChildren) {
+          scroller._stickyChildren = {}
+        }
+        scroller._stickyChildren[uid] = context
+      }
+      context.$nextTick(function () {
+        const el = context.$el
+        if (el) {
+          context._initOffsetTop = el.offsetTop
+        }
+      })
+    }
+  }
+
   return style
-  // return addPrefix(normalizeStyle(style))
 }
 
 export function extractComponentStyle (context) {
   return getComponentStyle(context, true)
 }
 
 /**
- * get { width, height } (size) of current component from components' styles.
+ * process sticky children in scrollable components.
+ * current only support list and vertical scroller.
  */
-export function getSize (context) {
-  if (!context.$vnode) {
-    if (process.env.NODE_ENV === 'development') {
-      return console.error('[vue-render] getComponentStyle failed: no $vnode in context.')
-    }
-    return {}
+export function processSticky (context) {
+  /**
+   * current browser support 'sticky' or '-webkit-sticky', so there's no need
+   * to do further more.
+   */
+  if (supportSticky()) {
+    return
   }
-  const data = context.$vnode.data
-  const wh = {}
-  const classes = typeof data.class === 'string' ? data.class.split(' ') : (data.class || [])
-  const staticClass = typeof data.staticClass === 'string' ? data.staticClass.split(' ') : (data.class || [])
-  const clsNms = staticClass.concat(classes)
-  function extendWHFrom (to, from) {
-    if (!from) { return }
-    from.width && (to.width = from.width)
-    from.height && (to.height = from.height)
+  // current only support list and vertical scroller.
+  if (container.scrollDirection === 'horizontal') {
+    return
+  }
+  const stickyChildren = context._stickyChildren
+  const len = stickyChildren && stickyChildren.length || 0
+  if (len <= 0) { return }
+
+  const container = context.$el
+  if (!container) { return }
+  const scrollTop = container.scrollTop
+
+  let stickyChild
+  for (let i = 0; i < len; i++) {
+    stickyChild = stickyChildren[i]
+    if (stickyChild._initOffsetTop < scrollTop) {
+      stickyChild._addSticky()
+    }
+    else {
+      stickyChild._removeSticky()
+    }
   }
-  extendWHFrom(wh, this._getScopeStyle(clsNms))
-  extendWHFrom(wh, data.staticStyle)
-  extendWHFrom(wh, data.style)
-  return wh
 }

html5/render/vue/index.js

@@ -19,7 +19,7 @@
 import weex from './env'
 import { setVue } from './env'
 import components from './components'
-import { base, style } from './mixins'
+import { base, style, sticky } from './mixins'
 // import styleMixin from './mixins/style'
 
 /**
@@ -60,6 +60,7 @@ function init (Vue/*, options = {}*/) {
   //     + `[${Object.keys(components).join(', ')}].`)
   Vue.mixin(base)
   Vue.mixin(style)
+  Vue.mixin(sticky)
   // }
 }
 

html5/render/vue/mixins/base.js

@@ -19,6 +19,8 @@
 import {
   getThrottleLazyload,
   watchAppear,
+  triggerAppear,
+  triggerDisappear,
   extend
 } from '../utils'
 
@@ -98,7 +100,7 @@ export default {
     if (this.$el && (i = j = this.$vnode) && (i = i.data) && (j = j.componentOptions)) {
       this.$el.attrs = extend({}, i.attrs, j.propsData)
     }
-
+    triggerAppear(this)
     watchAppear(this)
   },
 
@@ -112,7 +114,10 @@ export default {
     if (process.env.NODE_ENV === 'development') {
       tagUpdated()
     }
-    watchAppear(this)
+  },
+
+  destroyed () {
+    triggerDisappear(this)
   },
 
   methods: {
@@ -146,7 +151,7 @@ export default {
       if (process.env.NODE_ENV === 'development') {
         tagBegin('base._fireLazyload')
       }
-      getThrottleLazyload(500)()
+      getThrottleLazyload(25)()
       if (process.env.NODE_ENV === 'development') {
         tagEnd('base._fireLazyload')
       }

html5/render/vue/mixins/index.js

@@ -20,10 +20,12 @@ import base from './base'
 import style from './style'
 import scrollable from './scrollable'
 import inputCommon from './input-common'
+import sticky from './sticky'
 
 export {
   base,
   scrollable,
   style,
-  inputCommon
+  inputCommon,
+  sticky
 }

html5/render/vue/mixins/scrollable.js

@@ -17,8 +17,13 @@
  * under the License.
  */
 import { getThrottleLazyload, throttle } from '../utils'
+import { processSticky } from '../core'
+
+const DEFAULT_OFFSET_ACCURACY = 10
+const DEFAULT_LOADMORE_OFFSET = 0
 
 function getThrottledScroll (context) {
+  const scale = weex.config.env.scale
   if (!context._throttleScroll) {
     const wrapper = context.$refs.wrapper
     const inner = context.$refs.inner
@@ -30,7 +35,7 @@ function getThrottledScroll (context) {
       const offset = context.scrollDirection === 'horizontal'
         ? wrapper.scrollLeft
         : wrapper.scrollTop
-      const indent = parseInt(context.offsetAccuracy)
+      const indent = parseInt(context.offsetAccuracy) * scale
       function triggerScroll () {
         const rect = inner.getBoundingClientRect()
         evt.contentSize = { width: rect.width, height: rect.height }
@@ -52,25 +57,41 @@ function getThrottledScroll (context) {
         }
         context.$emit('scroll', evt)
       }
-      if (indent
-        && !isNaN(indent)
-        && indent > 0
-        && Math.abs(offset - preOffset) >= indent) {
+      if (Math.abs(offset - preOffset) >= indent) {
         triggerScroll()
         preOffset = offset
       }
-      else if (!indent || isNaN(indent) || indent <= 0) {
-        triggerScroll()
-      }
     }, 16, true)
   }
   return context._throttleScroll
 }
 
 export default {
   props: {
-    offsetAccuracy: [Number, String]
+    loadmoreoffset: {
+      type: [String, Number],
+      default: DEFAULT_LOADMORE_OFFSET,
+      validator (value) {
+        const val = parseInt(value)
+        return !isNaN(val) && val >= DEFAULT_LOADMORE_OFFSET
+      }
+    },
+
+    offsetAccuracy: {
+      type: [Number, String],
+      default: DEFAULT_OFFSET_ACCURACY,
+      validator (value) {
+        const val = parseInt(value)
+        return !isNaN(val) && val >= DEFAULT_OFFSET_ACCURACY
+      }
+    }
+  },
+
+  created () {
+    // should call resetLoadmore() to enable loadmore event.
+    this._loadmoreReset = true
   },
+
   methods: {
     updateLayout () {
       const wrapper = this.$refs.wrapper
@@ -81,11 +102,39 @@ export default {
       }
     },
 
+    resetLoadmore () {
+      this._loadmoreReset = true
+    },
+
     handleScroll (event) {
       getThrottleLazyload(25, this.$el, 'scroll')()
       getThrottledScroll(this)(event)
-      if (this.reachBottom()) {
-        this.$emit('loadmore', event)
+
+      processSticky(this)
+
+      // fire loadmore event.
+      const inner = this.$refs.inner
+      if (inner) {
+        const innerRect = inner.getBoundingClientRect()
+        const innerLength = this.scrollDirection === 'horizontal'
+          ? innerRect.width
+          : innerRect.height
+        // hscroller not support loadmore event yet.
+        if (this.scrollDirection === 'horizontal') {
+          return
+        }
+        if (!this._innerLength) {
+          this._innerLength = innerLength
+        }
+        if (this._innerLength !== innerLength) {
+          console.log(this._innerLength, innerLength)
+          this._innerLength = innerLength
+          this._loadmoreReset = true
+        }
+        if (this._loadmoreReset && this.reachBottom()) {
+          this._loadmoreReset = false
+          this.$emit('loadmore', event)
+        }
       }
     },
 
@@ -97,12 +146,20 @@ export default {
     reachBottom () {
       const wrapper = this.$refs.wrapper
       const inner = this.$refs.inner
-      const offset = Number(this.loadmoreoffset) || 0
+      const offset = parseInt(this.loadmoreoffset) * weex.config.env.scale
 
       if (wrapper && inner) {
-        const innerHeight = inner.getBoundingClientRect().height
-        const wrapperHeight = wrapper.getBoundingClientRect().height
-        return wrapper.scrollTop >= innerHeight - wrapperHeight - offset
+        const innerRect = inner.getBoundingClientRect()
+        const wrapperRect = wrapper.getBoundingClientRect()
+        const key = this.scrollDirection === 'horizontal'
+          ? 'width'
+          : 'height'
+        const innerLength = innerRect[key]
+        const wrapperLength = wrapperRect[key]
+        const scrollOffset = this.scrollDirection === 'horizontal'
+          ? wrapper.scrollLeft
+          : wrapper.scrollTop
+        return scrollOffset >= innerLength - wrapperLength - offset
       }
       return false
     },