Merge branch 'dev' of github.com:didi/cube-ui into dev

# Conflicts: # package.json

Merge branch 'dev' of github.com:didi/cube-ui into dev
# Conflicts: # package.json
2b6ff24d · dolymood · 0639c5d7 · 61db0319 · 0639c5d7 · 2b6ff24d
97 changed file
--- a/docs/css/app.094393590b40500049be4708259e04b4.css
+++ b/docs/css/app.094393590b40500049be4708259e04b4.css
--- a/docs/css/app.180aa3f86c925cfdd3c1ac20180ad2c3.css
+++ b/docs/css/app.180aa3f86c925cfdd3c1ac20180ad2c3.css
--- a/docs/example/css/app.50290fc3a2ccf03fd4b29845db4c4ab0.css
+++ b/docs/example/css/app.50290fc3a2ccf03fd4b29845db4c4ab0.css
--- a/docs/example/css/app.bbaec7f21a1e1969f03dce86b912b6f7.css
+++ b/docs/example/css/app.bbaec7f21a1e1969f03dce86b912b6f7.css
--- a/docs/example/index.html
+++ b/docs/example/index.html
-<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><link href=css/app.bbaec7f21a1e1969f03dce86b912b6f7.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.a6526fe909133c8ba7de.js></script><script type=text/javascript src=js/app.523ed840d75cfa8f67aa.js></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html><head><meta charset=UTF-8><title>cube-ui lib</title><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><link href=css/app.50290fc3a2ccf03fd4b29845db4c4ab0.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=js/manifest.346dd10710fe9c0348bf.js></script><script type=text/javascript src=js/vendor.a6526fe909133c8ba7de.js></script><script type=text/javascript src=js/app.48eabdec941cccf4e2f0.js></script></body></html>
\ No newline at end of file
--- a/docs/example/js/app.48eabdec941cccf4e2f0.js
+++ b/docs/example/js/app.48eabdec941cccf4e2f0.js
--- a/docs/example/js/app.523ed840d75cfa8f67aa.js
+++ b/docs/example/js/app.523ed840d75cfa8f67aa.js
--- a/docs/index.html
+++ b/docs/index.html
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><title>cube-ui Document</title><link href=/cube-ui/css/app.094393590b40500049be4708259e04b4.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.3068a8128095870f07bb.js></script><script type=text/javascript src=/cube-ui/js/vendor.cc2f17a2a551675ea25a.js></script><script type=text/javascript src=/cube-ui/js/app.47641adfe598e1671f38.js></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name=x5-cache content=disable><meta name=keywords content=CUBE,UI,VUE,COMPONENT,LIB,LIBRARY><link rel="shortcut icon" type=images/x-icon href=//webapp.didistatic.com/static/webapp/shield/Cube-UI_logo.ico><title>cube-ui Document</title><link href=/cube-ui/css/app.180aa3f86c925cfdd3c1ac20180ad2c3.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/cube-ui/js/manifest.c9808602e28ad090c11c.js></script><script type=text/javascript src=/cube-ui/js/vendor.cc2f17a2a551675ea25a.js></script><script type=text/javascript src=/cube-ui/js/app.47641adfe598e1671f38.js></script></body></html>
\ No newline at end of file
--- a/docs/js/10.54dab1cc1b5fa24b4ed9.js
+++ b/docs/js/10.54dab1cc1b5fa24b4ed9.js
--- a/docs/js/19.36f9a689d2fc7cbd458b.js
+++ b/docs/js/19.36f9a689d2fc7cbd458b.js
--- a/docs/js/19.52963edc96ae84a7bfdd.js
+++ b/docs/js/19.52963edc96ae84a7bfdd.js
--- a/docs/js/32.5a32fa6b39e1b6b25388.js
+++ b/docs/js/32.5a32fa6b39e1b6b25388.js
--- a/docs/js/52.25969bfc6d401b69fcf7.js
+++ b/docs/js/52.25969bfc6d401b69fcf7.js
--- a/docs/js/61.b68bb3c2660787faa44b.js
+++ b/docs/js/61.b68bb3c2660787faa44b.js
--- a/docs/js/61.e427002da0c2dd6ba223.js
+++ b/docs/js/61.e427002da0c2dd6ba223.js
--- a/docs/js/74.3297ab8800be14c083d4.js
+++ b/docs/js/74.3297ab8800be14c083d4.js
--- a/docs/js/manifest.3068a8128095870f07bb.js
+++ b/docs/js/manifest.3068a8128095870f07bb.js
-!function(e){function c(a){if(d[a])return d[a].exports;var f=d[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,c),f.l=!0,f.exports}var a=window.webpackJsonp;window.webpackJsonp=function(d,b,n){for(var r,t,o,u=0,i=[];u<d.length;u++)t=d[u],f[t]&&i.push(f[t][0]),f[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(a&&a(d,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var d={},f={88:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=f[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}var d=f[e];if(0===d)return new Promise(function(e){e()});if(d)return d[2];var b=new Promise(function(c,a){d=f[e]=[c,a]});d[2]=b;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+"js/"+e+"."+{0:"9cf876f3d8a0dd614939",1:"8cbaaf36e614ee3d9b86",2:"4ef293d219ab6dbb0cfc",3:"b853b2b2a3c20e6bf8ed",4:"d6af701a543a8fb02755",5:"7738cb81cbf78c9a7d4e",6:"87961418e2ec57592899",7:"5d0ba1ee77bc48c07460",8:"1c808f95c01ce3af0a84",9:"ee5f205a52f215ac1d6b",10:"54dab1cc1b5fa24b4ed9",11:"dc382ddc7935c9f46796",12:"8a95caad26d35f69cbfd",13:"d9efc3abe297630dced6",14:"c07f00aea03c853eb3bb",15:"8f30968a6de84c59ab95",16:"fecd9b55f3a8c82bed03",17:"525c569d081c374806df",18:"10fbc962ddf6f40615a5",19:"36f9a689d2fc7cbd458b",20:"c04daef968469e473303",21:"cb189a8cf79811d781a3",22:"4dda6914eb3af65a98b6",23:"d8da73850f2877346ccb",24:"752a38943e96cf60277b",25:"9fcda5e321bd3c72390d",26:"983952b33696b8abe011",27:"6bea32b9e341d571f6a1",28:"c7d7a2ecf89a1a694dd8",29:"3b75c2902bdcc82b5b80",30:"8aac53cdebdb4915c0fe",31:"419c1a92bf0f1d1ac120",32:"5a32fa6b39e1b6b25388",33:"551a2ee444fefdc804de",34:"3fab846e8ec4ce752010",35:"24af8069939e2b59d471",36:"c33bd21fe476bee0fe7d",37:"7944bfb264a214645895",38:"38053f2330e52a1115ad",39:"57629e37a20d5facadc6",40:"7ae0ed03ac1d08c19344",41:"37c87fe8a806df7d49d0",42:"0f975771077c58c426b2",43:"b1bbadf4cf2ee91d9cca",44:"a3cd5d1196374558364a",45:"7ee6435836047c381daf",46:"44842e13f93b1d63cd1e",47:"2facf586bef89e77e43a",48:"f10d0d26214d56dd172d",49:"ad0482975a866b85d71a",50:"be2b16c223d2adb4dd39",51:"16a4eb62e51edd35803e",52:"25969bfc6d401b69fcf7",53:"837a9cdee041535399f3",54:"78fb0caa1fa322b3ecfa",55:"7bfc6d989715d289e05a",56:"c9ee46c1932a1bfc3cf5",57:"744a0931565ffdfeb400",58:"72a617d7002878bb9c82",59:"6ccc2e0d9570370f6e67",60:"23f0d6290a302f7ee2fa",61:"e427002da0c2dd6ba223",62:"98332d83584ee5460b93",63:"3e33a57b63e074fd9493",64:"b8ef8edc084accc65f6b",65:"ba7ac23f388ee4886fd4",66:"656a21619bf7d0b2fa3f",67:"2de35909a537ac1cf075",68:"96977887dafb1a850101",69:"23650d770e1e9e5d3acb",70:"3431c008cc8063c7f52d",71:"fd5327b8557037d7f75c",72:"20dec4efb03f26e0d653",73:"eb96382791e8d78875e6",74:"3297ab8800be14c083d4",75:"473b2b1b53e1833f2911",76:"92257b20fc4bee54c033",77:"5c7dc5b3afae36086b74",78:"a7b9248744eb860c9294",79:"9b094831d2c33f9c1160",80:"e7193fef69a77d739729",81:"70087b8e30b06bb8c76e",82:"0dfb1c78f7c873e3cb49",83:"3f61d7aabaf7de62ab2b",84:"d145304ef7661bcba2ae",85:"4e0f4eb51995159a81ca"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),b},c.m=e,c.c=d,c.d=function(e,a,d){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:d})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="/cube-ui/",c.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
+!function(e){function c(a){if(d[a])return d[a].exports;var f=d[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,c),f.l=!0,f.exports}var a=window.webpackJsonp;window.webpackJsonp=function(d,b,n){for(var r,t,o,u=0,i=[];u<d.length;u++)t=d[u],f[t]&&i.push(f[t][0]),f[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(a&&a(d,b,n);i.length;)i.shift()();if(n)for(u=0;u<n.length;u++)o=c(c.s=n[u]);return o};var d={},f={88:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=f[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}var d=f[e];if(0===d)return new Promise(function(e){e()});if(d)return d[2];var b=new Promise(function(c,a){d=f[e]=[c,a]});d[2]=b;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+"js/"+e+"."+{0:"9cf876f3d8a0dd614939",1:"8cbaaf36e614ee3d9b86",2:"4ef293d219ab6dbb0cfc",3:"b853b2b2a3c20e6bf8ed",4:"d6af701a543a8fb02755",5:"7738cb81cbf78c9a7d4e",6:"87961418e2ec57592899",7:"5d0ba1ee77bc48c07460",8:"1c808f95c01ce3af0a84",9:"ee5f205a52f215ac1d6b",10:"fc9a767b22cf0dda309e",11:"dc382ddc7935c9f46796",12:"8a95caad26d35f69cbfd",13:"d9efc3abe297630dced6",14:"c07f00aea03c853eb3bb",15:"8f30968a6de84c59ab95",16:"fecd9b55f3a8c82bed03",17:"525c569d081c374806df",18:"10fbc962ddf6f40615a5",19:"52963edc96ae84a7bfdd",20:"c04daef968469e473303",21:"cb189a8cf79811d781a3",22:"4dda6914eb3af65a98b6",23:"d8da73850f2877346ccb",24:"752a38943e96cf60277b",25:"9fcda5e321bd3c72390d",26:"983952b33696b8abe011",27:"6bea32b9e341d571f6a1",28:"c7d7a2ecf89a1a694dd8",29:"3b75c2902bdcc82b5b80",30:"8aac53cdebdb4915c0fe",31:"419c1a92bf0f1d1ac120",32:"223fea9417aeea4d589f",33:"551a2ee444fefdc804de",34:"3fab846e8ec4ce752010",35:"24af8069939e2b59d471",36:"c33bd21fe476bee0fe7d",37:"7944bfb264a214645895",38:"38053f2330e52a1115ad",39:"57629e37a20d5facadc6",40:"7ae0ed03ac1d08c19344",41:"37c87fe8a806df7d49d0",42:"0f975771077c58c426b2",43:"b1bbadf4cf2ee91d9cca",44:"a3cd5d1196374558364a",45:"7ee6435836047c381daf",46:"44842e13f93b1d63cd1e",47:"2facf586bef89e77e43a",48:"f10d0d26214d56dd172d",49:"ad0482975a866b85d71a",50:"be2b16c223d2adb4dd39",51:"16a4eb62e51edd35803e",52:"3fdb2c3e01ef58d2bc2d",53:"837a9cdee041535399f3",54:"78fb0caa1fa322b3ecfa",55:"7bfc6d989715d289e05a",56:"c9ee46c1932a1bfc3cf5",57:"744a0931565ffdfeb400",58:"72a617d7002878bb9c82",59:"6ccc2e0d9570370f6e67",60:"23f0d6290a302f7ee2fa",61:"b68bb3c2660787faa44b",62:"98332d83584ee5460b93",63:"3e33a57b63e074fd9493",64:"b8ef8edc084accc65f6b",65:"ba7ac23f388ee4886fd4",66:"656a21619bf7d0b2fa3f",67:"2de35909a537ac1cf075",68:"96977887dafb1a850101",69:"23650d770e1e9e5d3acb",70:"3431c008cc8063c7f52d",71:"fd5327b8557037d7f75c",72:"20dec4efb03f26e0d653",73:"eb96382791e8d78875e6",74:"9b5ee6bbb73addd24256",75:"473b2b1b53e1833f2911",76:"92257b20fc4bee54c033",77:"5c7dc5b3afae36086b74",78:"a7b9248744eb860c9294",79:"9b094831d2c33f9c1160",80:"e7193fef69a77d739729",81:"70087b8e30b06bb8c76e",82:"0dfb1c78f7c873e3cb49",83:"3f61d7aabaf7de62ab2b",84:"d145304ef7661bcba2ae",85:"4e0f4eb51995159a81ca"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),b},c.m=e,c.c=d,c.d=function(e,a,d){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:d})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="/cube-ui/",c.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
--- a/document/components/docs/en-US/image-preview.md
+++ b/document/components/docs/en-US/image-preview.md
@@ -46,7 +46,7 @@ The following demo code is [here](https://github.com/didi/cube-ui/tree/master/ex
 - Custom usage

  ```html
-  <cube-button @click="showCustomImagePreview">Show Custom ImagePreview</cube
+  <cube-button @click="showCustomImagePreview">Show Custom ImagePreview</cube-button>
  ```

  ```js

--- a/document/components/docs/en-US/scroll.md
+++ b/document/components/docs/en-US/scroll.md
@@ -11,11 +11,14 @@ So for the Scroll component, The length of `.cube-scroll-content`, the scroll-co

 2）Scrolling horizontally: **The width of the content element must be greater than the container element.** Since the child element's width does not exceed the container element by default, the Scroll component's `.cube-scroll-content` element needs to be set to a width greater than the `.cube-scroll-wrapper`.

+> Note: If there is any situation where scrolling is not possible, you should first check if the height/width of the content element `.cube-scroll-content` is greater than the height/width of the container element `.cube-scroll-wrapper`. This is a prerequisite for content to scroll. **If there is  images in the content, the scrolling should be not normal. The reason is images may not be downloaded when the DOM element is rendered, so the height of the content element is less than expected. At this point you should manually call the Scroll component's `refresh()` method after the image has been loaded, such as calling in the onload event callback, which will recalculate the scroll distance.**
+
+
 ### Example

 Five sample code to quickly understand how to use the Scroll component.

- **Basic usage - Default**
+- **1. Basic usage - Default**

  By setting the data property to an array, you can generate an elegantly scrolling list. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/default.vue).

@@ -36,9 +39,9 @@ Five sample code to quickly understand how to use the Scroll component.

  > **Note**: As the scrolling principle above, it is necessary to provide a fixed height to the scroll container, and scroll only when the height of the scroll content is greater than the height of the container.

-  In the prop `options`, you are able to control the scroll bar seen or not via `scrollbar`, and configure the initial position by `startX/startY`.
+  In the prop `options`, you are able to control the scrollbar seen or not via `scrollbar`, and configure the initial position by `startX/startY`.

-  Scroll component provide a `scrollTo()` method that allows you to manually control the list scroll position.
+  Scroll component provides a `scrollTo()` method that allows you to manually control the list scroll position.

  ```javascript
  scrollTo() {
@@ -53,36 +56,41 @@ Five sample code to quickly understand how to use the Scroll component.

  In fact, this is a very useful method, such as when we want to achieve "click different anchor, list scroll to the corresponding position to show different content", you can use the `scrollTo ()` method.

- **Scrolling horizontally - Horizontal**
+- **2. Scrolling horizontally - Horizontal**

-  Scroll component support horizontal scrolling by specifying `direction = 'horizental'`. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/horizontal.vue)
+  Scroll component supports horizontal scrolling. All you need to do is specifying `direction = 'horizontal'` and giving some styles. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/horizontal.vue)

  ```html
-  <div class="horizontal-scroll-list-wrap">
-    <cube-scroll
-      ref="scroll"
-      direction="horizontal">
-      <ul class="list-wrapper">
-        <li v-for="item in items" class="list-item">{{ item }}</li>
-      </ul>
-    </cube-scroll>
-  </div>
+  <cube-scroll
+    ref="scroll"
+    :data="items"
+    direction="horizontal"
+    class="horizontal-scroll-list-wrap">
+    <ul class="list-wrapper">
+      <li v-for="item in items" class="list-item">{{ item }}</li>
+    </ul>
+  </cube-scroll>
  ```

  ```stylus
-  .cube-scroll-content
-    display: inline-block
+  .horizontal-scroll-list-wrap
+    border: 1px solid rgba(0, 0, 0, 0.1)
+    border-radius: 5px
+    .cube-scroll-content
+      display: inline-block
    .list-wrapper
      padding: 0 10px
      line-height: 60px
      white-space: nowrap
-      .list-item
-        display: inline-block
+    .list-item
+      display: inline-block
  ```

-  > **Note**：As the scrolling principle above, the CSS style setting here is required, and scrolling is possible only when the scrolling content is wider than the container width.
+  > **Note**：1. As the scrolling principle above, the CSS style setting here is required, and scrolling is possible only when the scrolling content is wider than the container width. 2. Sometimes we want to use the `Scroll` component to simulate the horizontal scroll, vertically retaining the browser's native scrolling, or vice versa. At this point you need to pass the better-scroll configuration item [eventPassthrough](http://ustbhuangyi.github.io/better-scroll/doc/en/options.html#eventpassthrough)
+
+  Here giving a brief explanation of the style settings. `list-item` items with `display: inline-block` lead to all `list-item` elements showing on one line. `list-wrapper` adds `white-space: nowrap` hope `list-item` also showing on one line when reaching the outer element boundary. And the most important is setting `cube-scroll-content` with `display: inline-block`， which make the width of `cube-scroll-content` bigger enough so that `cube-scroll-content` can wrap descendants elements. Styles with the same properties are floating elements and absolutely positioned elements. When no specific width is set, the width is the minimum width of the wrapped descendant element.

- **Custom content - Customized**
+- **3. Custom content - Customized**

  The Scroll component supports the customization of list content through default slot. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/config.vue).

@@ -90,6 +98,7 @@ Five sample code to quickly understand how to use the Scroll component.
  <div class="scroll-list-wrap">
    <cube-scroll
      ref="scroll"
+      :data="items"
      :options="options"
      @pulling-down="onPullingDown"
      @pulling-up="onPullingUp">
@@ -98,7 +107,7 @@ Five sample code to quickly understand how to use the Scroll component.
  </div>
  ```

-  Scroll components also support **pull-down refresh** and **pull-up load** capabilities. By default, there is no pulldown refresh/pullup load. You can enable corresponding functions by `pullDownRefresh` and `pullUpLoad`. After opening, when pulling down, the Scroll component will show the default pulldown animation and dispatch pulldown events. You can monitor the `pull-down` event to update the data. Similarly, after the pull-up load is enabled, the data can be updated by the `pull-up` event.
+  Scroll components also support **pull-down refresh** and **pull-up load** capabilities. By default, there is no pulldown refresh/pull-up load. You can enable corresponding functions by `pullDownRefresh` and `pullUpLoad`. After opening, when pulling down, the Scroll component will show the default pulldown animation and dispatch pulldown events. You can monitor the `pull-down` event to update the data. Similarly, after the pull-up load is enabled, the data can be updated by the `pull-up` event.

  `pullDownRefresh`'s related configurations include: drop threshold (threshold), rebound position (stop), update successful copy (txt) and copy display time (stopTime). See the [Props configuration](#/en-US/docs/scroll#cube-Propsconfiguration-anchor) for all the configuration items and meanings of the `pullDownRefresh` and `pullUpLoad` objects.

@@ -144,9 +153,9 @@ Five sample code to quickly understand how to use the Scroll component.
  }
  ```

-  > **Note**: If a pulldown refresh has no data update, you must manually call the Scroll component's `forceUpdate()` method to end the pulldown refresh so that Scroll will restart listening for the next pulldown refresh operation. When the data is updated, the Scroll component will invoke `forceUpate()` method internally.
+  > **Note**: If a pulldown-refresh/pullup-loading has no data update, you must manually call the Scroll component's `forceUpdate()` method to end the pulldown-refresh/pullup-loading so that Scroll will restart listening for the next pulldown-refresh/pullup-loading operation. In the above example, when the data is updated, we did not invoke the `forceUpdate()` method. The reason is: ** If you pass the `data` attribute to the `Scroll` component, then when the `Scroll` component listens to the `data` update, the `forceUpate(true)` method will be called automatically. ** so it is recommended to pass the `data` attribute.

- **Custom pull-down refresh animation - Fake JD App**
+- **4. Custom pull-down refresh animation - Fake JD App**

  If you don't like the built-in pull-down refresh and pull-up loading animations, you can also use the scope slots for custom animations. The variables exposed by [the scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) of the Scroll component are perfect to meet the needs of custom pull-down/pull-up animations in most scenarios. The following example imitates the pull-down refresh animation of Jingdong App's homepage. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/jd.vue).

@@ -232,12 +241,12 @@ Five sample code to quickly understand how to use the Scroll component.
  | - | - | - | - |
  | 1. Untrigger pull-down refresh | true | - | Show pattern guide user continues to  pull down |
  | 2. Trigger pull-down refresh | false | true | Asynchronous request data，show loading |
-  | 3. Request data success | false | false | invoke `forceUpdate()`, show success copy |
-  | 4. A pull-down refresh complete | true | - | after invoke `forceUpdate()`, delay stopTime to step 4 |
+  | 3. Request data success | false | false | invoke `forceUpdate(true)`, show success copy. And delay 'stopTime' into step 4 |
+  | 4. A pull-down refresh complete | true | - | - |

- **Advanced usage - Fake TouTiao App**
+- **5. Advanced usage - Fake TouTiao App**

-Scroll components can meet the scrolling needs of most mobile applications. In this example, using two Scroll components, one  vertical and one horizontal, to imitates the Toutiao App's home page. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/toutiao.vue).
+Scroll components can meet the scrolling needs of most mobile applications. In this example, using two Scroll components, one vertical and one horizontal, to imitates the Toutiao App's home page. The complete sample code is [here](https://github.com/didi/cube-ui/blob/master/example/pages/scroll/toutiao.vue).

 ```html
  <div class="nav-scroll-list-wrap">
@@ -319,10 +328,10 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe

 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
-| threshold | the threshold of  distance that pulling down for  refreshing | Number | - | 90 |
+| threshold | the threshold of distance that pulling down for refreshing | Number | - | 90 |
 | stop | the position where rebounding stays | Number | - | Scroll component will calculate the height of pulldown element as default `stop` value |
-| stopTime | the time that keep showing the text of refreshing success | Number | - | 600 |
-| txt | the text shown when refreshing successfully | String | - | 'Refresh success' |
+| stopTime | the time that keeps showing the text of refreshing success | Number | - | 600 |
+| txt | the text is shown when refreshing successfully | String | - | 'Refresh success' |

 - `pullUpLoad` sub configuration

@@ -356,8 +365,8 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe
 | Method Name | Description | Parameters |
 | - | - | - |
 | scrollTo | Scroll to specific position. | x: horizontal position<br> y: vertical position<br> time: transition time<br> ease: easing function |
+| forceUpdate | Mark the end of pull-up or pull-down, and force recalculation of scrollable distance | dirty: whether there is data updating, when "true" indicate data updated so recalculate scrollable distance, when false no data update and no need to recalculate |
 | disable | Disable scroll. | - |
 | enable | Enable scroll. It's enabled by default | - |
-| forceUpdate | If a pulldown/pullup refresh has no data update, you should call `forceUpdate()` method to force update pullUp/pullDown state | - |
 | resetPullUpTxt | Reset pull up txt when pull up state changed from no data to data updated | - |
-| refresh | Refresh, computed height and called BetterScroll instance's refresh | - |
+| refresh | Refresh, computed height and called BetterScroll instance's refresh | - |
\ No newline at end of file
--- a/document/components/docs/en-US/tab-bar.md
+++ b/document/components/docs/en-US/tab-bar.md
@@ -63,7 +63,7 @@ The following demo code is [here](https://github.com/didi/cube-ui/tree/master/ex
  <template>
    <cube-tab-bar
      v-model="selectedLabelSlots"
-      showSlider
+      show-slider
      inline
      @click="clickHandler">
      <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="item.label">
@@ -112,7 +112,7 @@ Usually, our requirement is to display different panel as tabs are switched, so

 ```html
 <template>
-  <cube-tab-bar v-model="selectedLabel" showSlider>
+  <cube-tab-bar v-model="selectedLabel" show-slider>
    <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="item.label">
      <i slot="icon" :icon="item.icon"></i>
      {{item.label}}

--- a/document/components/docs/zh-CN/image-preview.md
+++ b/document/components/docs/zh-CN/image-preview.md
@@ -91,7 +91,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 - 自定义使用

  ```html
-  <cube-button @click="showCustomImagePreview">Show Custom ImagePreview</cube
+  <cube-button @click="showCustomImagePreview">Show Custom ImagePreview</cube-button>
  ```

  ```js

--- a/document/components/docs/zh-CN/scroll.md
+++ b/document/components/docs/zh-CN/scroll.md
--- a/document/components/docs/zh-CN/tab-bar.md
+++ b/document/components/docs/zh-CN/tab-bar.md
@@ -68,7 +68,7 @@
  <template>
    <cube-tab-bar
      v-model="selectedLabelSlots"
-      showSlider
+      show-slider
      inline
      @click="clickHandler">
      <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="item.label">
@@ -117,7 +117,7 @@

 ```html
 <template>
-  <cube-tab-bar v-model="selectedLabel" showSlider>
+  <cube-tab-bar v-model="selectedLabel" show-slider>
    <cube-tab v-for="(item, index) in tabs" :icon="item.icon" :label="item.label" :key="item.label">
    </cube-tab>
  </cube-tab-bar>

--- a/example/pages/scroll/jd.vue
+++ b/example/pages/scroll/jd.vue
@@ -16,7 +16,7 @@
              class="cube-pulldown-wrapper"
              :style="pullDownStyle">
            <div class="pulldown-content">
-              <img src="http://om0jxp12h.bkt.clouddn.com/pulldow-img.jpg">
+              <img src="http://om0jxp12h.bkt.clouddn.com/pulldow-img.jpg" @load="onImgLoad">
              <span v-if="props.beforePullDown">{{ pullDownTip }}</span>
              <template v-else>
                <span v-if="props.isPullingDown">正在更新...</span>
@@ -102,6 +102,9 @@ export default {
      this.triggerSurprise = false
      this.$refs.topHeader.style.opacity = 1
      // go to other page
+    },
+    onImgLoad() {
+      this.$refs.scroll.refresh()
    }
  }
 }

--- a/example/pages/scroll/toutiao.vue
+++ b/example/pages/scroll/toutiao.vue
@@ -22,7 +22,7 @@
            @pulling-up="onPullingUp">
            <ul class="imgs-wrapper">
              <li v-for="(item, index) in content" :key="index" class="imgs-item">
-                <img :src="item.url">
+                <img :src="item.url" @load="onImgLoad">
              </li>
            </ul>
            <template slot="pulldown" slot-scope="props">
@@ -101,6 +101,9 @@ export default {
      setTimeout(() => {
        this.content = this.content.concat(imgs)
      }, 1000)
+    },
+    onImgLoad() {
+      this.$refs.contentScroll.refresh()
    }
  },
  mounted() {

--- a/example/pages/tab-bar/tab-bar.vue
+++ b/example/pages/tab-bar/tab-bar.vue
@@ -14,7 +14,7 @@
      <div class="section">
        <cube-tab-bar
          v-model="selectedLabelSlots"
-          showSlider
+          show-slider
          @click="clickHandler"
          @change="changeHandler">
          <cube-tab v-for="(item, index) in tabs" :icon="item.icon" :label="item.label" :key="item.label">
@@ -25,7 +25,7 @@
      <div class="section">
        <cube-tab-bar
          v-model="selectedLabelInline"
-          showSlider
+          show-slider
          inline
          @click="clickHandler"
          @change="changeHandler">

--- a/example/pages/tab-bar/tab-basic.vue
+++ b/example/pages/tab-bar/tab-basic.vue
 <template>
  <cube-page type="tabs-basic-view" title="tab-basic">
    <div slot="content">
-      <cube-tab-bar v-model="selectedLabel" showSlider>
+      <cube-tab-bar v-model="selectedLabel" show-slider>
        <cube-tab v-for="(item, index) in tabs" :label="item.label" :icon="item.icon" :key="item.label"></cube-tab>
      </cube-tab-bar>
      <cube-tab-panels v-model="selectedLabel">

--- a/example/pages/tab-bar/tab-composite.vue
+++ b/example/pages/tab-bar/tab-composite.vue
@@ -2,8 +2,8 @@
  <cube-page type="tab-composite-view" title="tab-composite">
    <div slot="content">
      <cube-tab-bar v-model="selectedLabel"
-                    showSlider
-                    :useTransition="disabled"
+                    show-slider
+                    :use-transition="disabled"
                    ref="tabNav"
                    :data="tabLabels">
      </cube-tab-bar>

--- a/lib/action-sheet/action-sheet.min.css
+++ b/lib/action-sheet/action-sheet.min.css
--- a/lib/action-sheet/style.css
+++ b/lib/action-sheet/style.css
--- a/lib/cascade-picker/cascade-picker.min.css
+++ b/lib/cascade-picker/cascade-picker.min.css
--- a/lib/cascade-picker/style.css
+++ b/lib/cascade-picker/style.css
--- a/lib/checkbox-group/checkbox-group.min.css
+++ b/lib/checkbox-group/checkbox-group.min.css
--- a/lib/checkbox-group/style.css
+++ b/lib/checkbox-group/style.css
--- a/lib/checkbox/checkbox.min.css
+++ b/lib/checkbox/checkbox.min.css
-.cube-checkbox{position:relative;padding:0 16px;text-align:left;font-size:100%;color:#666}.cube-checkbox[data-pos=right] .cube-checkbox-ui{margin-right:0;position:absolute;right:0}.cube-checkbox[data-pos=right] .cube-checkbox-label{margin-right:1.42em}.cube-checkbox-wrap{position:relative;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;box-sizing:border-box;width:100%;height:100%;padding:11px 0;line-height:1.5;word-break:break-word;word-wrap:break-word}.cube-checkbox-input{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.cube-checkbox-ui{position:relative;width:1em;height:1em;margin-right:.42em;line-height:1;border-radius:50%}.cube-checkbox-ui.cubeic-square-border{border-radius:2px}.cube-checkbox-ui:before,.cube-checkbox-ui i{-webkit-transition:all .2s;transition:all .2s}.cube-checkbox-ui:before{color:#ccc;display:inline-block;-webkit-transform:scale(1.24);transform:scale(1.24)}.cube-checkbox-ui i{position:absolute;top:0;left:0;color:transparent;-webkit-transform:scale(.4);transform:scale(.4)}.cube-checkbox_checked .cube-checkbox-ui:before{color:transparent}.cube-checkbox_checked .cube-checkbox-ui i{color:#fc9153;-webkit-transform:scale(1.23);transform:scale(1.23)}.cube-checkbox_disabled .cube-checkbox-ui{background-color:#eee}.cube-checkbox_disabled .cube-checkbox-ui:before,.cube-checkbox_disabled .cube-checkbox-ui i{-webkit-transition:none;transition:none}.cube-checkbox_disabled .cube-checkbox-ui:before{color:transparent}.cube-checkbox_disabled .cube-checkbox-ui i{color:#eee}.cube-checkbox_checked.cube-checkbox_disabled .cube-checkbox-ui{background-color:#fff}.cube-checkbox-hollow i{width:100%;height:100%}.cube-checkbox-hollow i:before{content:"";position:absolute;top:50%;left:50%;width:50%;height:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:currentColor;border-radius:2px}.cube-checkbox-hollow.cube-checkbox_checked .cube-checkbox-ui:before{color:#fc9153}.cube-checkbox-hollow.cube-checkbox_checked .cube-checkbox-ui i{-webkit-transform:scale(1);transform:scale(1);color:#fc9153}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui{background-color:transparent}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui:before{color:#eee}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui i{-webkit-transform:scale(1);transform:scale(1);color:transparent}.cube-checkbox-hollow.cube-checkbox_disabled.cube-checkbox_checked .cube-checkbox-ui i{color:#eee}
\ No newline at end of file
+.cube-checkbox{position:relative;padding:0 16px;text-align:left;font-size:100%;color:#666}.cube-checkbox[data-pos=right] .cube-checkbox-ui{margin-right:0;position:absolute;right:0}.cube-checkbox[data-pos=right] .cube-checkbox-label{margin-right:1.42em}.cube-checkbox-wrap{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;width:100%;height:100%;padding:11px 0;line-height:1.5;word-break:break-word;word-wrap:break-word}.cube-checkbox-input{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.cube-checkbox-ui{position:relative;width:1em;height:1em;margin-right:.42em;line-height:1;border-radius:50%}.cube-checkbox-ui.cubeic-square-border{border-radius:2px}.cube-checkbox-ui:before,.cube-checkbox-ui i{-webkit-transition:all .2s;transition:all .2s}.cube-checkbox-ui:before{color:#ccc;display:inline-block;-webkit-transform:scale(1.24);transform:scale(1.24)}.cube-checkbox-ui i{position:absolute;top:0;left:0;color:transparent;-webkit-transform:scale(.4);transform:scale(.4)}.cube-checkbox_checked .cube-checkbox-ui:before{color:transparent}.cube-checkbox_checked .cube-checkbox-ui i{color:#fc9153;-webkit-transform:scale(1.23);transform:scale(1.23)}.cube-checkbox_disabled .cube-checkbox-ui{background-color:#eee}.cube-checkbox_disabled .cube-checkbox-ui:before,.cube-checkbox_disabled .cube-checkbox-ui i{-webkit-transition:none;transition:none}.cube-checkbox_disabled .cube-checkbox-ui:before{color:transparent}.cube-checkbox_disabled .cube-checkbox-ui i{color:#eee}.cube-checkbox_checked.cube-checkbox_disabled .cube-checkbox-ui{background-color:#fff}.cube-checkbox-hollow i{width:100%;height:100%}.cube-checkbox-hollow i:before{content:"";position:absolute;top:50%;left:50%;width:50%;height:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:currentColor;border-radius:2px}.cube-checkbox-hollow.cube-checkbox_checked .cube-checkbox-ui:before{color:#fc9153}.cube-checkbox-hollow.cube-checkbox_checked .cube-checkbox-ui i{-webkit-transform:scale(1);transform:scale(1);color:#fc9153}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui{background-color:transparent}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui:before{color:#eee}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui i{-webkit-transform:scale(1);transform:scale(1);color:transparent}.cube-checkbox-hollow.cube-checkbox_disabled.cube-checkbox_checked .cube-checkbox-ui i{color:#eee}
\ No newline at end of file
--- a/lib/checkbox/style.css
+++ b/lib/checkbox/style.css
--- a/lib/cube.min.css
+++ b/lib/cube.min.css
--- a/lib/cube.min.js
+++ b/lib/cube.min.js
--- a/lib/date-picker/date-picker.min.css
+++ b/lib/date-picker/date-picker.min.css
--- a/lib/date-picker/style.css
+++ b/lib/date-picker/style.css
--- a/lib/dialog/dialog.min.css
+++ b/lib/dialog/dialog.min.css
--- a/lib/dialog/style.css
+++ b/lib/dialog/style.css
--- a/lib/drawer/drawer.min.css
+++ b/lib/drawer/drawer.min.css
--- a/lib/drawer/style.css
+++ b/lib/drawer/style.css
--- a/lib/form/form.min.css
+++ b/lib/form/form.min.css
--- a/lib/form/style.css
+++ b/lib/form/style.css
--- a/lib/image-preview/image-preview.min.css
+++ b/lib/image-preview/image-preview.min.css
--- a/lib/image-preview/style.css
+++ b/lib/image-preview/style.css
--- a/lib/index-list/index-list.min.css
+++ b/lib/index-list/index-list.min.css
--- a/lib/index-list/style.css
+++ b/lib/index-list/style.css
--- a/lib/index.js
+++ b/lib/index.js
--- a/lib/input/input.min.css
+++ b/lib/input/input.min.css
--- a/lib/input/style.css
+++ b/lib/input/style.css
--- a/lib/picker/picker.min.css
+++ b/lib/picker/picker.min.css
--- a/lib/picker/style.css
+++ b/lib/picker/style.css
--- a/lib/radio-group/radio-group.min.css
+++ b/lib/radio-group/radio-group.min.css
--- a/lib/radio-group/style.css
+++ b/lib/radio-group/style.css
--- a/lib/radio/radio.min.css
+++ b/lib/radio/radio.min.css
--- a/lib/radio/style.css
+++ b/lib/radio/style.css
--- a/lib/rate/rate.min.css
+++ b/lib/rate/rate.min.css
--- a/lib/rate/style.css
+++ b/lib/rate/style.css
--- a/lib/scroll-nav-bar/scroll-nav-bar.min.css
+++ b/lib/scroll-nav-bar/scroll-nav-bar.min.css
--- a/lib/scroll-nav-bar/style.css
+++ b/lib/scroll-nav-bar/style.css
--- a/lib/scroll-nav/scroll-nav.min.css
+++ b/lib/scroll-nav/scroll-nav.min.css
--- a/lib/scroll-nav/style.css
+++ b/lib/scroll-nav/style.css
--- a/lib/scroll/scroll.min.css
+++ b/lib/scroll/scroll.min.css
--- a/lib/scroll/style.css
+++ b/lib/scroll/style.css
--- a/lib/segment-picker/segment-picker.min.css
+++ b/lib/segment-picker/segment-picker.min.css
--- a/lib/segment-picker/style.css
+++ b/lib/segment-picker/style.css
--- a/lib/select/select.min.css
+++ b/lib/select/select.min.css
--- a/lib/select/style.css
+++ b/lib/select/style.css
--- a/lib/style.css
+++ b/lib/style.css
--- a/lib/style/style.css
+++ b/lib/style/style.css
--- a/lib/style/style.min.css
+++ b/lib/style/style.min.css
--- a/lib/swipe/style.css
+++ b/lib/swipe/style.css
--- a/lib/swipe/swipe.min.css
+++ b/lib/swipe/swipe.min.css
--- a/lib/switch/style.css
+++ b/lib/switch/style.css
--- a/lib/switch/switch.min.css
+++ b/lib/switch/switch.min.css
--- a/lib/tab-bar/index.js
+++ b/lib/tab-bar/index.js
@@ -746,6 +746,16 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
    },
    mounted: function mounted() {
      this._updateSliderStyle();
+      window.addEventListener('resize', this._resizeHandler);
+    },
+    activated: function activated() {
+      window.addEventListener('resize', this._resizeHandler);
+    },
+    deactivated: function deactivated() {
+      this._cleanUp();
+    },
+    beforeDestroy: function beforeDestroy() {
+      this._cleanUp();
    },

    methods: {
@@ -814,6 +824,18 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
          if (i < index) offsetLeft += tab.$el.clientWidth;
        });
        return offsetLeft;
+      },
+      _resizeHandler: function _resizeHandler() {
+        var _this4 = this;
+
+        clearTimeout(this._resizeTimer);
+        this._resizeTimer = setTimeout(function () {
+          _this4._updateSliderStyle();
+        }, 60);
+      },
+      _cleanUp: function _cleanUp() {
+        clearTimeout(this._resizeTimer);
+        window.removeEventListener('resize', this._resizeHandler);
      }
    },
    watch: {

--- a/lib/tab-bar/style.css
+++ b/lib/tab-bar/style.css
--- a/lib/tab-bar/tab-bar.min.css
+++ b/lib/tab-bar/tab-bar.min.css
--- a/lib/tab-bar/tab-bar.min.js
+++ b/lib/tab-bar/tab-bar.min.js
--- a/lib/tab-panels/style.css
+++ b/lib/tab-panels/style.css
--- a/lib/tab-panels/tab-panels.min.css
+++ b/lib/tab-panels/tab-panels.min.css
--- a/lib/time-picker/style.css
+++ b/lib/time-picker/style.css
--- a/lib/time-picker/time-picker.min.css
+++ b/lib/time-picker/time-picker.min.css
--- a/lib/tip/style.css
+++ b/lib/tip/style.css
--- a/lib/tip/tip.min.css
+++ b/lib/tip/tip.min.css
--- a/lib/toast/style.css
+++ b/lib/toast/style.css
--- a/lib/toast/toast.min.css
+++ b/lib/toast/toast.min.css
--- a/lib/toolbar/style.css
+++ b/lib/toolbar/style.css
--- a/lib/toolbar/toolbar.min.css
+++ b/lib/toolbar/toolbar.min.css
--- a/lib/upload/style.css
+++ b/lib/upload/style.css
--- a/lib/upload/upload.min.css
+++ b/lib/upload/upload.min.css
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "cube-ui",
-  "version": "1.10.14",
+  "version": "1.10.15",
  "description": "A fantastic mobile ui lib implement by Vue",
  "main": "lib/index.js",
  "module": "src/index.js",
@@ -164,6 +164,7 @@
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
-    "Android >= 4.0"
+    "Android >= 4.0",
+    "iOS >= 8"
  ]
 }
--- a/test/unit/specs/tab-bar.spec.js
+++ b/test/unit/specs/tab-bar.spec.js