@dcloudio/uni-h5 2.0.0 → 2.0.1-32920211122002

package/src/core/view/components/rich-text/index.vue

@@ -32,13 +32,22 @@ export default {
   },
   methods: {
     _renderNodes (nodes) {
+      let scopeId = ''
+      let $vm = this
+      while ($vm) {
+        !scopeId && (scopeId = $vm.$options._scopeId)
+        $vm = $vm.$parent
+      }
+
+      const hasItemClick = !!this.$listeners.itemclick
+
       if (!this._isMounted) {
         return
       }
       if (typeof nodes === 'string') {
         nodes = parseHtml(nodes)
       }
-      const nodeList = parseNodes(nodes, document.createDocumentFragment())
+      const nodeList = parseNodes(nodes, document.createDocumentFragment(), scopeId, hasItemClick && this.triggerItemClick)
       nodeList.appendChild(this.$refs.sensor.$el)
       const content = this.$refs.content
       content.innerHTML = ''
@@ -46,6 +55,9 @@ export default {
     },
     _updateView () {
       window.dispatchEvent(new CustomEvent('updateview'))
+    },
+    triggerItemClick (e, detail = {}) {
+      this.$trigger('itemclick', e, detail)
     }
   }
 }

package/src/core/view/components/rich-text/nodes-parser.js

@@ -2,6 +2,7 @@ import {
   hasOwn,
   isPlainObject
 } from 'uni-shared'
+import getRealPath from 'uni-platform/helpers/get-real-path'
 
 const TAGS = {
   a: '',
@@ -96,7 +97,12 @@ function decodeEntities (htmlString) {
   })
 }
 
-export default function parseNodes (nodes, parentNode) {
+function normlizeValue (tagName, name, value) {
+  if (tagName === 'img' && name === 'src') return getRealPath(value)
+  return value
+}
+
+export default function parseNodes (nodes, parentNode, scopeId, triggerItemClick) {
   nodes.forEach(function (node) {
     if (!isPlainObject(node)) {
       return
@@ -124,18 +130,21 @@ export default function parseNodes (nodes, parentNode) {
               Array.isArray(value) && (value = value.join(' '))
             case 'style':
               elem.setAttribute(name, value)
+              scopeId && elem.setAttribute(scopeId, '')
               break
             default:
               if (tagAttrs.indexOf(name) !== -1) {
-                elem.setAttribute(name, value)
+                elem.setAttribute(name, normlizeValue(tagName, name, value))
               }
           }
         })
       }
 
+      processClickEvent(node, elem, triggerItemClick)
+
       const children = node.children
       if (Array.isArray(children) && children.length) {
-        parseNodes(node.children, elem)
+        parseNodes(node.children, elem, scopeId, triggerItemClick)
       }
 
       parentNode.appendChild(elem)
@@ -146,4 +155,14 @@ export default function parseNodes (nodes, parentNode) {
     }
   })
   return parentNode
-}
+}
+
+function processClickEvent (node, elem, triggerItemClick) {
+  if (['a', 'img'].includes(node.name) && triggerItemClick) {
+    elem.setAttribute('onClick', 'return false;')
+    elem.addEventListener('click', (e) => {
+      triggerItemClick(e, { node })
+      e.stopPropagation()
+    }, true)
+  }
+}

package/src/core/view/components/scroll-view/index.vue

@@ -6,7 +6,10 @@
     >
       <div
         ref="main"
-        :style="{'overflow-x': scrollX?'auto':'hidden','overflow-y': scrollY?'auto':'hidden'}"
+        :style="{
+          'overflow-x': scrollX ? 'auto' : 'hidden',
+          'overflow-y': scrollY ? 'auto' : 'hidden',
+        }"
         class="uni-scroll-view"
       >
         <div
@@ -16,7 +19,10 @@
           <div
             v-if="refresherEnabled"
             ref="refresherinner"
-            :style="{'background-color': refresherBackground, 'height': refresherHeight + 'px'}"
+            :style="{
+              'background-color': refresherBackground,
+              height: refresherHeight + 'px',
+            }"
             class="uni-scroll-view-refresher"
           >
             <div
@@ -25,22 +31,26 @@
             >
               <div class="uni-scroll-view-refresh-inner">
                 <svg
-                  v-if="refreshState=='pulling'"
-                  :style="{'transform': 'rotate('+ refreshRotate +'deg)'}"
+                  v-if="refreshState == 'pulling'"
+                  key="refresh__icon"
+                  :style="{ transform: 'rotate(' + refreshRotate + 'deg)' }"
                   fill="#2BD009"
                   class="uni-scroll-view-refresh__icon"
                   width="24"
                   height="24"
                   viewBox="0 0 24 24"
                 >
-                  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+                  <path
+                    d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+                  />
                   <path
                     d="M0 0h24v24H0z"
                     fill="none"
                   />
                 </svg>
                 <svg
-                  v-if="refreshState=='refreshing'"
+                  v-if="refreshState == 'refreshing'"
+                  key="refresh__spinner"
                   class="uni-scroll-view-refresh__spinner"
                   width="24"
                   height="24"
@@ -51,14 +61,14 @@
                     cy="50"
                     r="20"
                     fill="none"
-                    style="color: #2BD009;"
+                    style="color: #2bd009"
                     stroke-width="3"
                   />
                 </svg>
               </div>
             </div>
             <slot
-              v-if="refresherDefaultStyle=='none'"
+              v-if="refresherDefaultStyle == 'none'"
               name="refresher"
             />
           </div>
@@ -70,17 +80,17 @@
 </template>
 <script>
 import scroller from 'uni-mixins/scroller/index'
-import {
-  supportsPassive
-} from 'uni-shared'
+import { supportsPassive } from 'uni-shared'
 import {
   initScrollBounce,
   disableScrollBounce
 } from 'uni-platform/helpers/scroll'
 
-const passiveOptions = supportsPassive ? {
-  passive: true
-} : false
+const passiveOptions = supportsPassive
+  ? {
+    passive: true
+  }
+  : false
 
 // const PULLING = 'pulling'
 // const REFRESHING = 'refreshing'
@@ -194,7 +204,14 @@ export default {
   },
   mounted () {
     var self = this
+    var touchStart = null
+    var needStop = null
+
     this._attached = true
+    this.toUpperNumber = 0 // 容器触顶时，此时鼠标Y轴位置
+    this.triggerAbort = false
+    this.beforeRefreshing = false
+
     this._scrollTopChanged(this.scrollTopNumber)
     this._scrollLeftChanged(this.scrollLeftNumber)
     this._scrollIntoViewChanged(this.scrollIntoView)
@@ -203,62 +220,83 @@ export default {
       event.stopPropagation()
       self._handleScroll.bind(self, event)()
     }
-    var touchStart = null
-    var needStop = null
+
     this.__handleTouchMove = function (event) {
       var x = event.touches[0].pageX
       var y = event.touches[0].pageY
       var main = self.$refs.main
-      if (needStop === null) {
-        if (Math.abs(x - touchStart.x) > Math.abs(y - touchStart.y)) {
-          // 横向滑动
-          if (self.scrollX) {
-            if (main.scrollLeft === 0 && x > touchStart.x) {
-              needStop = false
-              return
-            } else if (main.scrollWidth === main.offsetWidth + main.scrollLeft && x < touchStart.x) {
-              needStop = false
-              return
-            }
-            needStop = true
-          } else {
+
+      if (Math.abs(x - touchStart.x) > Math.abs(y - touchStart.y)) {
+        // 横向滑动
+        if (self.scrollX) {
+          if (main.scrollLeft === 0 && x > touchStart.x) {
+            needStop = false
+            return
+          } else if (
+            main.scrollWidth === main.offsetWidth + main.scrollLeft &&
+            x < touchStart.x
+          ) {
             needStop = false
+            return
           }
+          needStop = true
         } else {
-          // 纵向滑动
-          if (self.scrollY) {
-            if (main.scrollTop === 0 && y > touchStart.y) {
-              needStop = false
-              return
-            } else if (main.scrollHeight === main.offsetHeight + main.scrollTop && y < touchStart.y) {
-              needStop = false
-              return
+          needStop = false
+        }
+      } else {
+        // 纵向滑动
+        if (self.scrollY) {
+          if (main.scrollTop === 0 && y > touchStart.y) {
+            needStop = false
+            // 刷新时，阻止页面滚动
+            if (self.refresherEnabled && event.cancelable !== false) {
+              event.preventDefault()
             }
-            needStop = true
-          } else {
+          } else if (
+            main.scrollHeight === main.offsetHeight + main.scrollTop &&
+            y < touchStart.y
+          ) {
             needStop = false
+            return
+          } else {
+            needStop = true
           }
+        } else {
+          needStop = false
         }
       }
+
       if (needStop) {
         event.stopPropagation()
       }
 
+      if (main.scrollTop === 0 && event.touches.length === 1) {
+        // 如果容器滑动到达顶端，则进入下拉状态
+        self.refreshState = 'pulling'
+      }
+
       if (self.refresherEnabled && self.refreshState === 'pulling') {
         const dy = y - touchStart.y
-        self.refresherHeight = dy
-
-        let rotate = dy / self.refresherThreshold
-        if (rotate > 1) {
-          rotate = 1
+        if (self.toUpperNumber === 0) {
+          self.toUpperNumber = y
+        }
+        if (!self.beforeRefreshing) {
+          self.refresherHeight = y - self.toUpperNumber
+          // 之前为刷新状态则不再触发pulling
+          if (self.refresherHeight > 0) {
+            self.triggerAbort = true
+            self.$trigger('refresherpulling', event, {
+              deltaY: dy
+            })
+          }
         } else {
-          rotate = rotate * 360
+          self.refresherHeight = dy + self.refresherThreshold
+          // 如果之前在刷新状态，则不触发刷新中断
+          self.triggerAbort = false
         }
-        self.refreshRotate = rotate
 
-        self.$trigger('refresherpulling', event, {
-          deltaY: dy
-        })
+        const route = self.refresherHeight / self.refresherThreshold
+        self.refreshRotate = (route > 1 ? 1 : route) * 360
       }
     }
 
@@ -267,14 +305,10 @@ export default {
         disableScrollBounce({
           disable: true
         })
-        needStop = null
         touchStart = {
           x: event.touches[0].pageX,
           y: event.touches[0].pageY
         }
-        if (self.refresherEnabled && self.refreshState !== 'refreshing' && self.$refs.main.scrollTop === 0) {
-          self.refreshState = 'pulling'
-        }
       }
     }
     this.__handleTouchEnd = function (event) {
@@ -285,16 +319,29 @@ export default {
       if (self.refresherHeight >= self.refresherThreshold) {
         self._setRefreshState('refreshing')
       } else {
-        self.refresherHeight = 0
-        self.$trigger('refresherabort', event, {})
+        self._setRefreshState('refresherabort')
       }
     }
-    this.$refs.main.addEventListener('touchstart', this.__handleTouchStart, passiveOptions)
-    this.$refs.main.addEventListener('touchmove', this.__handleTouchMove, passiveOptions)
-    this.$refs.main.addEventListener('scroll', this.__handleScroll, supportsPassive ? {
-      passive: false
-    } : false)
-    this.$refs.main.addEventListener('touchend', this.__handleTouchEnd, passiveOptions)
+    this.$refs.main.addEventListener(
+      'touchstart',
+      this.__handleTouchStart,
+      passiveOptions
+    )
+    this.$refs.main.addEventListener('touchmove', this.__handleTouchMove)
+    this.$refs.main.addEventListener(
+      'scroll',
+      this.__handleScroll,
+      supportsPassive
+        ? {
+          passive: false
+        }
+        : false
+    )
+    this.$refs.main.addEventListener(
+      'touchend',
+      this.__handleTouchEnd,
+      passiveOptions
+    )
     initScrollBounce()
   },
   activated () {
@@ -303,34 +350,70 @@ export default {
     this.scrollX && (this.$refs.main.scrollLeft = this.lastScrollLeft)
   },
   beforeDestroy () {
-    this.$refs.main.removeEventListener('touchstart', this.__handleTouchStart, passiveOptions)
-    this.$refs.main.removeEventListener('touchmove', this.__handleTouchMove, passiveOptions)
-    this.$refs.main.removeEventListener('scroll', this.__handleScroll, supportsPassive ? {
-      passive: false
-    } : false)
-    this.$refs.main.removeEventListener('touchend', this.__handleTouchEnd, passiveOptions)
+    this.$refs.main.removeEventListener(
+      'touchstart',
+      this.__handleTouchStart,
+      passiveOptions
+    )
+    this.$refs.main.removeEventListener(
+      'touchmove',
+      this.__handleTouchMove,
+      passiveOptions
+    )
+    this.$refs.main.removeEventListener(
+      'scroll',
+      this.__handleScroll,
+      supportsPassive
+        ? {
+          passive: false
+        }
+        : false
+    )
+    this.$refs.main.removeEventListener(
+      'touchend',
+      this.__handleTouchEnd,
+      passiveOptions
+    )
   },
   methods: {
     scrollTo: function (t, n) {
       var i = this.$refs.main
-      t < 0 ? t = 0 : n === 'x' && t > i.scrollWidth - i.offsetWidth ? t = i.scrollWidth - i.offsetWidth
-        : n === 'y' && t > i.scrollHeight - i.offsetHeight && (t = i.scrollHeight - i.offsetHeight)
+      t < 0
+        ? (t = 0)
+        : n === 'x' && t > i.scrollWidth - i.offsetWidth
+          ? (t = i.scrollWidth - i.offsetWidth)
+          : n === 'y' &&
+          t > i.scrollHeight - i.offsetHeight &&
+          (t = i.scrollHeight - i.offsetHeight)
       var r = 0
       var o = ''
-      n === 'x' ? r = i.scrollLeft - t : n === 'y' && (r = i.scrollTop - t)
+      n === 'x' ? (r = i.scrollLeft - t) : n === 'y' && (r = i.scrollTop - t)
       if (r !== 0) {
         this.$refs.content.style.transition = 'transform .3s ease-out'
-        this.$refs.content.style.webkitTransition = '-webkit-transform .3s ease-out'
+        this.$refs.content.style.webkitTransition =
+          '-webkit-transform .3s ease-out'
         if (n === 'x') {
           o = 'translateX(' + r + 'px) translateZ(0)'
         } else {
           n === 'y' && (o = 'translateY(' + r + 'px) translateZ(0)')
         }
-        this.$refs.content.removeEventListener('transitionend', this.__transitionEnd)
-        this.$refs.content.removeEventListener('webkitTransitionEnd', this.__transitionEnd)
+        this.$refs.content.removeEventListener(
+          'transitionend',
+          this.__transitionEnd
+        )
+        this.$refs.content.removeEventListener(
+          'webkitTransitionEnd',
+          this.__transitionEnd
+        )
         this.__transitionEnd = this._transitionEnd.bind(this, t, n)
-        this.$refs.content.addEventListener('transitionend', this.__transitionEnd)
-        this.$refs.content.addEventListener('webkitTransitionEnd', this.__transitionEnd)
+        this.$refs.content.addEventListener(
+          'transitionend',
+          this.__transitionEnd
+        )
+        this.$refs.content.addEventListener(
+          'webkitTransitionEnd',
+          this.__transitionEnd
+        )
         if (n === 'x') {
           // if (e !== 'ios') {
           i.style.overflowX = 'hidden'
@@ -354,14 +437,22 @@ export default {
         this._noBubble = false
       }
       if (this._noBubble === null && this.scrollY) {
-        if (Math.abs(this._y - $event.detail.y) / Math.abs(this._x - $event.detail.x) > 1) {
+        if (
+          Math.abs(this._y - $event.detail.y) /
+            Math.abs(this._x - $event.detail.x) >
+          1
+        ) {
           this._noBubble = true
         } else {
           this._noBubble = false
         }
       }
       if (this._noBubble === null && this.scrollX) {
-        if (Math.abs(this._x - $event.detail.x) / Math.abs(this._y - $event.detail.y) > 1) {
+        if (
+          Math.abs(this._x - $event.detail.x) /
+            Math.abs(this._y - $event.detail.y) >
+          1
+        ) {
           this._noBubble = true
         } else {
           this._noBubble = false
@@ -374,48 +465,67 @@ export default {
       }
     },
     _handleScroll: function ($event) {
-      if (!($event.timeStamp - this._lastScrollTime < 20)) {
-        this._lastScrollTime = $event.timeStamp
-        const target = $event.target
-        this.$trigger('scroll', $event, {
-          scrollLeft: target.scrollLeft,
-          scrollTop: target.scrollTop,
-          scrollHeight: target.scrollHeight,
-          scrollWidth: target.scrollWidth,
-          deltaX: this.lastScrollLeft - target.scrollLeft,
-          deltaY: this.lastScrollTop - target.scrollTop
-        })
-        if (this.scrollY) {
-          if (target.scrollTop <= this.upperThresholdNumber && this.lastScrollTop - target.scrollTop > 0 && $event.timeStamp - this.lastScrollToUpperTime > 200) {
-            this.$trigger('scrolltoupper', $event, {
-              direction: 'top'
-            })
-            this.lastScrollToUpperTime = $event.timeStamp
-          }
-          if (target.scrollTop + target.offsetHeight + this.lowerThresholdNumber >= target.scrollHeight && this.lastScrollTop - target.scrollTop < 0 && $event.timeStamp - this.lastScrollToLowerTime > 200) {
-            this.$trigger('scrolltolower', $event, {
-              direction: 'bottom'
-            })
-            this.lastScrollToLowerTime = $event.timeStamp
-          }
+      const target = $event.target
+      this.$trigger('scroll', $event, {
+        scrollLeft: target.scrollLeft,
+        scrollTop: target.scrollTop,
+        scrollHeight: target.scrollHeight,
+        scrollWidth: target.scrollWidth,
+        deltaX: this.lastScrollLeft - target.scrollLeft,
+        deltaY: this.lastScrollTop - target.scrollTop
+      })
+      if (this.scrollY) {
+        if (
+          target.scrollTop <= this.upperThresholdNumber &&
+          this.lastScrollTop - target.scrollTop > 0 &&
+          $event.timeStamp - this.lastScrollToUpperTime > 200
+        ) {
+          this.$trigger('scrolltoupper', $event, {
+            direction: 'top'
+          })
+          this.lastScrollToUpperTime = $event.timeStamp
         }
-        if (this.scrollX) {
-          if (target.scrollLeft <= this.upperThresholdNumber && this.lastScrollLeft - target.scrollLeft > 0 && $event.timeStamp - this.lastScrollToUpperTime > 200) {
-            this.$trigger('scrolltoupper', $event, {
-              direction: 'left'
-            })
-            this.lastScrollToUpperTime = $event.timeStamp
-          }
-          if (target.scrollLeft + target.offsetWidth + this.lowerThresholdNumber >= target.scrollWidth && this.lastScrollLeft - target.scrollLeft < 0 && $event.timeStamp - this.lastScrollToLowerTime > 200) {
-            this.$trigger('scrolltolower', $event, {
-              direction: 'right'
-            })
-            this.lastScrollToLowerTime = $event.timeStamp
-          }
+        if (
+          target.scrollTop +
+            target.offsetHeight +
+            this.lowerThresholdNumber >=
+            target.scrollHeight &&
+          this.lastScrollTop - target.scrollTop < 0 &&
+          $event.timeStamp - this.lastScrollToLowerTime > 200
+        ) {
+          this.$trigger('scrolltolower', $event, {
+            direction: 'bottom'
+          })
+          this.lastScrollToLowerTime = $event.timeStamp
         }
-        this.lastScrollTop = target.scrollTop
-        this.lastScrollLeft = target.scrollLeft
       }
+      if (this.scrollX) {
+        if (
+          target.scrollLeft <= this.upperThresholdNumber &&
+          this.lastScrollLeft - target.scrollLeft > 0 &&
+          $event.timeStamp - this.lastScrollToUpperTime > 200
+        ) {
+          this.$trigger('scrolltoupper', $event, {
+            direction: 'left'
+          })
+          this.lastScrollToUpperTime = $event.timeStamp
+        }
+        if (
+          target.scrollLeft +
+            target.offsetWidth +
+            this.lowerThresholdNumber >=
+            target.scrollWidth &&
+          this.lastScrollLeft - target.scrollLeft < 0 &&
+          $event.timeStamp - this.lastScrollToLowerTime > 200
+        ) {
+          this.$trigger('scrolltolower', $event, {
+            direction: 'right'
+          })
+          this.lastScrollToLowerTime = $event.timeStamp
+        }
+      }
+      this.lastScrollTop = target.scrollTop
+      this.lastScrollLeft = target.scrollLeft
     },
     _scrollTopChanged: function (val) {
       if (this.scrollY) {
@@ -489,18 +599,38 @@ export default {
         main.style.overflowY = this.scrollY ? 'auto' : 'hidden'
         main.scrollTop = val
       }
-      this.$refs.content.removeEventListener('transitionend', this.__transitionEnd)
-      this.$refs.content.removeEventListener('webkitTransitionEnd', this.__transitionEnd)
+      this.$refs.content.removeEventListener(
+        'transitionend',
+        this.__transitionEnd
+      )
+      this.$refs.content.removeEventListener(
+        'webkitTransitionEnd',
+        this.__transitionEnd
+      )
     },
     _setRefreshState (state) {
       switch (state) {
         case 'refreshing':
           this.refresherHeight = this.refresherThreshold
-          this.$trigger('refresherrefresh', event, {})
+          // 之前是刷新状态则不再触发刷新
+          if (!this.beforeRefreshing) {
+            this.beforeRefreshing = true
+            this.$trigger('refresherrefresh', {}, {})
+            // this.$emit('update:refresherTriggered', true)
+          }
           break
         case 'restore':
-          this.refresherHeight = 0
-          this.$trigger('refresherrestore', {}, {})
+        case 'refresherabort':
+          this.beforeRefreshing = false
+          this.refresherHeight = this.toUpperNumber = 0
+          if (state === 'restore') {
+            this.triggerAbort = false
+            this.$trigger('refresherrestore', {}, {})
+          }
+          if (state === 'refresherabort' && this.triggerAbort) {
+            this.triggerAbort = false
+            this.$trigger('refresherabort', {}, {})
+          }
           break
       }
       this.refreshState = state
@@ -567,7 +697,8 @@ uni-scroll-view[hidden] {
   height: 40px;
   border-radius: 50%;
   background-color: #fff;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, .117647), 0 1px 4px rgba(0, 0, 0, .117647);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
+    0 1px 4px rgba(0, 0, 0, 0.117647);
 }
 
 .uni-scroll-view-refresh__spinner {

package/src/core/view/components/slider/index.vue

@@ -253,7 +253,7 @@ export default {
     _onTrack: function (e) {
       if (!this.disabled) {
         return e.detail.state === 'move' ? (this._onUserChangedValue({
-          x: e.detail.x0
+          x: e.detail.x
         }), this.$trigger('changing', e, {
           value: this.sliderValue
         }), !1) : (e.detail.state === 'end' && this.$trigger('change', e, {

package/src/core/view/components/swiper/index.vue

@@ -487,6 +487,7 @@ export default {
       }
     },
     _handleTrackStart () {
+      if (!this.items.length) return
       this._cancelSchedule()
       this._contentTrackViewport = this._viewportPosition
       this._contentTrackSpeed = 0
@@ -494,6 +495,7 @@ export default {
       this._cancelViewportAnimation()
     },
     _handleTrackMove (data) {
+      if (!this.items.length) return
       var self = this
       var contentTrackT = this._contentTrackT
       this._contentTrackT = Date.now()
@@ -528,6 +530,7 @@ export default {
       }
     },
     _handleTrackEnd (isCancel) {
+      if (!this.items.length) return
       this.userTracking = false
       var t = this._contentTrackSpeed / Math.abs(this._contentTrackSpeed)
       var n = 0