Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

c5fbdebb · lilinsen · ddb5995e · f477635e · c5fbdebb · c5fbdebb
30 changed file
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
 ## 2.0.3

+`2019-1-25`
+
+* :sparkles: 新增返回顶部`BackTop`组件
 * :bug: 修复`Swiper`组件 slideChangeEnd 事件的一个bug
+* :zap: `Rate`组件增加允许设置只读和间距
+* :zap: 文档MD转Vue增加文件缓存功能，提升文档预览和构建速度
+* :zap: 示例页面增加评分推荐

 ## 2.0.2


--- a/package.json
+++ b/package.json
 {
  "name": "@nutui/nutui",
-  "version": "2.0.2",
+  "version": "2.0.3",
  "description": "一套轻量级移动端Vue组件库",
  "typings": "dist/types/index.d.ts",
  "main": "dist/nutui.js",

--- a/scripts/mdToVue.js
+++ b/scripts/mdToVue.js
 const fs = require('fs');
-var path = require('path');
+const path = require('path');
 //hash获取工具
 let { hashElement } = require('folder-hash');
 //marked转换工具
@@ -83,7 +83,7 @@ function createdFile(output, sorce, ishasCode) {
    var bufs = `<template><div  @click="dsCode">
        <div v-if="content" class="layer">
          <pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
-        </div>`+ res + `<nut-backtop></nut-backtop></div></template><script>import root from '../root.js';
+        </div>`+ res + `<nut-backtop :right="50" :bottom="50"></nut-backtop></div></template><script>import root from '../root.js';
        export default {
            mixins:[root]
        }</script>`;
@@ -187,7 +187,6 @@ function checkIsexists (path,callback){
    let pathFileName = path.replace(/[^a-zA-Z]/g,'');
    let cacheName = './local'+pathFileName+'.cache';
    fs.exists(cacheName, res=>{
-        console.log(res)
        if(!res){
            fs.writeFile(cacheName,'','utf8',()=>{
                callback(cacheName)

--- a/sites/demo/app.js
+++ b/sites/demo/app.js
@@ -69,7 +69,7 @@ OfflinePluginRuntime.install({
    console.log('PWA缓存有更新，需要刷新页面');

    app.$dialog({
-      title: "您正在浏览的页面有更新，请刷新",
+      title: "当前页面有新版本，请刷新",
      noCloseBtn: true,
      noOkBtn: true,
      cancelBtnTxt: "刷新页面",

--- a/sites/demo/app.vue
+++ b/sites/demo/app.vue
@@ -51,7 +51,6 @@ h4 {
  box-sizing: border-box;
 }
 .demo {
-  padding-left: 8px;
-  padding-right: 8px;
+  padding:0 8px 20px 8px;
 }
 </style>
--- a/sites/demo/view/index.vue
+++ b/sites/demo/view/index.vue
@@ -16,6 +16,7 @@
            <a :href="'./demo.html#/'+cpt.name">
              {{cpt.name}}
              <span>{{cpt.chnName}}</span>
+              <nut-rate class="cpt-rec" v-if="cpt.star" :total="5" :value="cpt.star" :size="8" :spacing="3" :readOnly="true"></nut-rate>
            </a>
          </li>
        </template>
@@ -151,12 +152,13 @@ export default {
    border-top: 1px solid #edeef1;
    border-radius: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-11 0h30v30h-30z'/%3E%3Cpath d='M7.757 15C5.241 10.755 2.727 6.51.21 2.266A1.5 1.5 0 0 1 2.79.736l8 13.499c.28.472.28 1.058 0 1.53l-8 13.5a1.499 1.499 0 1 1-2.58-1.53L7.757 15z' fill='rgb(132,132,132)' /%3E%3C/g%3E%3C/svg%3E")
-      no-repeat right 15px center;
+      no-repeat right 10px center;
    background-size: 10px 10px;
    a {
-      display: block;
+      display: flex;
+      align-items:center;
      height: 100%;
-      padding: 20px;
+      padding: 20px 10px 20px 10px;
      text-decoration: none;
      color: #2e2d2d;
    }
@@ -176,7 +178,10 @@ li {
  margin: 0;
  padding: 0;
 }
-
+.cpt-rec{
+  display:inline-flex;
+  margin-left:5px;
+}
 @-webkit-keyframes swing {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

--- a/sites/doc/app.vue
+++ b/sites/doc/app.vue
@@ -9,7 +9,7 @@
          <a href="#/index" class="logo-link">
            <img src="./asset/css/i/nut.png" alt>
          </a>
-          <span class="version">{{version}}</span>
+          <span class="version">v{{version}}</span>
        </div>
        <div class="h-nav">
          <search/>

--- a/src/assets/img/loading.png
+++ b/src/assets/img/loading.png
--- a/src/config.json
+++ b/src/config.json
@@ -26,6 +26,7 @@
      "type": "method",
      "showDemo": true,
      "desc": "模态弹窗，支持按钮交互，支持图片弹窗。",
+      "star": 5,
      "author": "Frans"
    },
    {
@@ -46,6 +47,7 @@
      "desc": "轻提示。",
      "type": "method",
      "showDemo": true,
+      "star": 4,
      "author": "Frans"
    },
    {
@@ -56,6 +58,7 @@
      "desc": "从底部弹出的动作菜单面板。",
      "type": "component",
      "showDemo": true,
+      "star": 5,
      "author": "iris"
    },
    {
@@ -66,6 +69,7 @@
      "desc": "常用于平级区域大块内容的的收纳和展现。",
      "type": "component",
      "showDemo": true,
+      "star": 3,
      "author": "甄玉磊"
    },
    {
@@ -86,6 +90,7 @@
      "desc": "用于不同模块以之间的切换",
      "type": "component",
      "showDemo": true,
+      "star": 3,
      "author": "甄玉磊"
    },
    {
@@ -96,6 +101,7 @@
      "desc": "日历",
      "type": "component",
      "showDemo": true,
+      "star": 5,
      "author": "iris"
    },
    {
@@ -106,6 +112,7 @@
      "desc": "日期选择",
      "type": "component",
      "showDemo": true,
+      "star": 5,
      "author": "iris"
    },
    {
@@ -128,6 +135,16 @@
      "showDemo": true,
      "author": "wangyue"
    },
+    {
+      "name": "Switch",
+      "version": "1.0.0",
+      "sort": "1",
+      "chnName": "开关",
+      "type": "component",
+      "showDemo": true,
+      "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
+      "author": "Frans"
+    },
    {
      "version": "1.0.0",
      "name": "Slider",
@@ -136,6 +153,7 @@
      "desc": "滑动输入器，用于在数值区间/自定义区间内进行选择。",
      "type": "component",
      "showDemo": true,
+      "star": 4,
      "author": "Frans"
    },
    {
@@ -146,6 +164,7 @@
      "desc": "区间选择器组件",
      "type": "component",
      "showDemo": true,
+      "star": 4,
      "author": "famanoder"
    },
    {
@@ -156,6 +175,7 @@
      "desc": "提供多个选项集合供用户选择其中一项。",
      "type": "component",
      "showDemo": true,
+      "star": 5,
      "author": "iris"
    },
    {
@@ -246,6 +266,7 @@
      "desc": "用于快速的评级操作，或对评价进行展示。",
      "type": "component",
      "showDemo": true,
+      "star": 4,
      "author": "永无止晋"
    },
    {
@@ -256,6 +277,7 @@
      "desc": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。",
      "type": "component",
      "showDemo": true,
+      "star": 5,
      "author": "wangnan31"
    },
    {
@@ -276,6 +298,7 @@
      "type": "component",
      "sort": "1",
      "showDemo": true,
+      "star": 3,
      "author": "famanoder"
    },
    {
@@ -308,16 +331,6 @@
      "showDemo": true,
      "author": "苏子刚"
    },
-    {
-      "name": "Switch",
-      "version": "1.0.0",
-      "sort": "1",
-      "chnName": "开关",
-      "type": "component",
-      "showDemo": true,
-      "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态",
-      "author": "Frans"
-    },
    {
      "name": "Radio",
      "version": "1.0.0",
@@ -378,6 +391,16 @@
      "showDemo": true,
      "author": "wangnan31"
    },
+    {
+      "version": "1.0.0",
+      "name": "Scroller",
+      "chnName": "滚动",
+      "desc": "滚动组件",
+      "type": "component",
+      "sort": "1",
+      "showDemo": false,
+      "author": "iris"
+    },
    {
      "version": "1.0.0",
      "name": "BackTop",

--- a/src/packages/cell/cell.vue
+++ b/src/packages/cell/cell.vue
@@ -7,7 +7,7 @@
            </div>
            <div class="nut-cell-right">
                <span class="nut-cell-desc"><slot name="desc">{{desc}}</slot></span>
-                <span class="nut-cell-icon"><slot name="icon" v-if="showIcon"><img src="data:image/svg+xml,%3Csvg viewBox='0 0 5 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.215 9.757l3.577-4.17a.931.931 0 0 0 0-1.173L1.215.244a.642.642 0 0 0-1.007 0 .929.929 0 0 0 0 1.172L3.283 5 .208 8.584a.93.93 0 0 0 0 1.173.643.643 0 0 0 1.007 0z' fill='%23c8c8cd'/%3E%3C/svg%3E" alt=""></slot></span>
+                <span class="nut-cell-icon"><slot name="icon" v-if="showIcon"><img src="data:image/svg+xml,%3Csvg viewBox='0 0 5 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.215 9.757l3.577-4.17a.931.931 0 0 0 0-1.173L1.215.244a.642.642 0 0 0-1.007 0 .929.929 0 0 0 0 1.172L3.283 5 .208 8.584a.93.93 0 0 0 0 1.173.643.643 0 0 0 1.007 0z' fill='rgb(200,200,205)'/%3E%3C/svg%3E" alt=""></slot></span>
            </div>
        </div>
    </a>

--- a/src/packages/cell/demo.vue
+++ b/src/packages/cell/demo.vue
@@ -18,7 +18,7 @@
            </nut-cell>
            <nut-cell :showIcon="true">
                <span slot="title">通过Slot自定义右侧ICON</span>
-                <img slot="icon" src="data:image/svg+xml, %3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 3.2c0-.7-.5-1.2-1.2-1.2-.3 0-.7.1-.9.4-2.4 2.5-6.2 6.8-7.7 8.5-.1.1-.2.2-.4 0L2.1 7.2c-.3-.3-.6-.4-.9-.4-.7 0-1.2.5-1.2 1.1 0 .3.1.6.3.8l.1.1 4.9 4.9c.8.8 1.6 0 2-.5 4.1-4.4 7.9-8.6 8.4-9.2.2-.3.3-.5.3-.8z' fill='%23737383'/%3E%3C/svg%3E" alt="">
+                <img slot="icon" src="data:image/svg+xml, %3Csvg version='1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 3.2c0-.7-.5-1.2-1.2-1.2-.3 0-.7.1-.9.4-2.4 2.5-6.2 6.8-7.7 8.5-.1.1-.2.2-.4 0L2.1 7.2c-.3-.3-.6-.4-.9-.4-.7 0-1.2.5-1.2 1.1 0 .3.1.6.3.8l.1.1 4.9 4.9c.8.8 1.6 0 2-.5 4.1-4.4 7.9-8.6 8.4-9.2.2-.3.3-.5.3-.8z' fill='rgb(115,115,131)'/%3E%3C/svg%3E" alt="">
            </nut-cell>
        </div>
    </div>

--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -63,7 +63,7 @@ body.dialog-open {
    font-size: 20px;
    text-align: center;
    text-decoration: none;
-    background: url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23848484' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+    background: url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb(132,132,132)' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    background-size: 13px 13px;
    img {
        height: 13px;
@@ -91,7 +91,7 @@ body.dialog-open {
        text-decoration: none;
        border: 2px solid #FFF;
        border-radius: 50%;
-        background: url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+        background: url("data:image/svg+xml, %3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb(255,255,255)' fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
        background-size: 13px 13px;
        img {
            height: 13px;

--- a/src/packages/dialog/doc.md
+++ b/src/packages/dialog/doc.md
@@ -88,7 +88,8 @@ this.$dialog({
 | noFooter | 是否隐藏底部按钮栏 | Boolean | false
 | noOkBtn | 是否隐藏确定按钮 | Boolean | false
 | noCancelBtn | 是否隐藏取消按钮 | Boolean | false
-| okBtnTxt | 确定按钮文案 | String | ”确定“
+| cancelBtnTxt | 取消按钮文案 | String | ”取 s消“
+| okBtnTxt | 确定按钮文案 | String | ”确 定“
 | okBtnDisabled | 禁用确定按钮 | Boolean | false
 | cancelAutoClose | 取消按钮是否默认关闭弹窗 | Boolean | true
 | textAlign | 文字对齐方向，可选值同css的text-align | String | "center"

--- a/src/packages/navbar/navbar.scss
+++ b/src/packages/navbar/navbar.scss
@@ -18,7 +18,7 @@
                display: inline-block;
                width: 20px;
                height: 20px;
-                background: url("data:image/svg+xml, %3Csvg width='19' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.552 35.569a1.5 1.5 0 0 1-2.121-.017c-5.952-6.05-9.905-10.1-15.857-16.15a2 2 0 0 1 0-2.804c5.952-6.05 9.905-10.1 15.857-16.15a1.5 1.5 0 1 1 2.138 2.104C12.847 8.368 9.125 12.184 3.403 18c5.722 5.816 9.444 9.632 15.166 15.448a1.5 1.5 0 0 1-.017 2.121z' fill='%239E9E9E' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
+                background: url("data:image/svg+xml, %3Csvg width='19' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.552 35.569a1.5 1.5 0 0 1-2.121-.017c-5.952-6.05-9.905-10.1-15.857-16.15a2 2 0 0 1 0-2.804c5.952-6.05 9.905-10.1 15.857-16.15a1.5 1.5 0 1 1 2.138 2.104C12.847 8.368 9.125 12.184 3.403 18c5.722 5.816 9.444 9.632 15.166 15.448a1.5 1.5 0 0 1-.017 2.121z' fill='rgb(158,158,158)' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
                background-size: contain;
                vertical-align: middle;
            }

--- a/src/packages/noticebar/noticebar.scss
+++ b/src/packages/noticebar/noticebar.scss
 @import '../../styles/index.scss';
-.nut-noticebar{
+.nut-noticebar {
    display: flex;
    height: 40px;
    padding: 0 10px;
@@ -8,15 +8,15 @@
    position: relative;
    align-items: center;
    color: $text-color;
-    background-color:rgba(251,248,220,1);
-    a{
-        text-decoration:none; 
-        color:rgba(211,125,066,1);;
+    background-color: rgba(251, 248, 220, 1);
+    a {
+        text-decoration: none;
+        color: rgba(211, 125, 066, 1);
+        ;
    }
-    &.close{
+    &.close {
        border-radius: 0 20px 20px 0;
    }
-    
    .withicon {
        position: relative;
        padding-right: 40px;
@@ -24,10 +24,10 @@
    .left-icon {
        height: 16px;
        min-width: 16px;
-        margin-right:5px;
+        margin-right: 5px;
        box-sizing: border-box;
-        background-size:100% 100%;
-        background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23D68048' d='M509.7 960.1c-53.5 0-106.1-9-156.6-26.8l-.2-.1c-8-2.9-14.5-8.7-18.1-16.4-3.7-7.7-4.1-16.4-1.2-24.4 4.7-12.7 17-21.3 30.6-21.3 3.7 0 7.4.6 11 1.9 43.3 15.2 88.6 22.9 134.5 22.9 47.2 0 93.7-8.1 138.1-24.2l.8-.3c3.7-1.4 7.5-2 11.3-2 13.4 0 25.7 8.4 30.5 21l.1.2c2.9 8 2.5 16.7-1.1 24.4-3.6 7.8-10 13.6-18 16.6-52.1 18.9-106.4 28.5-161.7 28.5zM219.3 824c-60 0-108.7-48.2-108.7-107.4v-4c0-21.6 6.4-42.4 18.5-60.2 12.2-17.8 29.2-31.3 49.3-39.1l7.1-2.8v-165c0-79.8 29.8-156.4 84-215.8 53.8-59 127-96.2 206.3-105l10-1.1V90.2c0-14.5 11.8-26.4 26.4-26.4 14.5 0 26.4 11.8 26.4 26.4v33.4l10 1.1c79.2 8.7 152.4 46 206.1 105 54.1 59.4 83.9 136 83.9 215.8v165.1l7.1 2.8c20.1 7.8 37.1 21.3 49.3 39.1 12.2 17.8 18.6 38.6 18.6 60.1v4c0 28.4-11.1 55.2-31.3 75.4-20.6 20.6-48 32-77.2 32H219.3zm-16.6-152.8c-16.9 6.8-28 23.5-27.7 41.6v3.8c-.2 24.5 19.5 44.7 44.1 45h585.7c11.5-.1 22.3-4.5 30.5-12.5 8.6-8.4 13.6-20.2 13.5-32.3l.1-3.9c.3-18.1-10.8-34.9-27.6-41.6L774 652.6V445.5c0-143.6-117.5-260.4-262-260.4S250 301.9 250 445.5v207.1l-47.3 18.6z'/%3E%3C/svg%3E");
+        background-size: 100% 100%;
+        background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(214,128,72)' d='M509.7 960.1c-53.5 0-106.1-9-156.6-26.8l-.2-.1c-8-2.9-14.5-8.7-18.1-16.4-3.7-7.7-4.1-16.4-1.2-24.4 4.7-12.7 17-21.3 30.6-21.3 3.7 0 7.4.6 11 1.9 43.3 15.2 88.6 22.9 134.5 22.9 47.2 0 93.7-8.1 138.1-24.2l.8-.3c3.7-1.4 7.5-2 11.3-2 13.4 0 25.7 8.4 30.5 21l.1.2c2.9 8 2.5 16.7-1.1 24.4-3.6 7.8-10 13.6-18 16.6-52.1 18.9-106.4 28.5-161.7 28.5zM219.3 824c-60 0-108.7-48.2-108.7-107.4v-4c0-21.6 6.4-42.4 18.5-60.2 12.2-17.8 29.2-31.3 49.3-39.1l7.1-2.8v-165c0-79.8 29.8-156.4 84-215.8 53.8-59 127-96.2 206.3-105l10-1.1V90.2c0-14.5 11.8-26.4 26.4-26.4 14.5 0 26.4 11.8 26.4 26.4v33.4l10 1.1c79.2 8.7 152.4 46 206.1 105 54.1 59.4 83.9 136 83.9 215.8v165.1l7.1 2.8c20.1 7.8 37.1 21.3 49.3 39.1 12.2 17.8 18.6 38.6 18.6 60.1v4c0 28.4-11.1 55.2-31.3 75.4-20.6 20.6-48 32-77.2 32H219.3zm-16.6-152.8c-16.9 6.8-28 23.5-27.7 41.6v3.8c-.2 24.5 19.5 44.7 44.1 45h585.7c11.5-.1 22.3-4.5 30.5-12.5 8.6-8.4 13.6-20.2 13.5-32.3l.1-3.9c.3-18.1-10.8-34.9-27.6-41.6L774 652.6V445.5c0-143.6-117.5-260.4-262-260.4S250 301.9 250 445.5v207.1l-47.3 18.6z'/%3E%3C/svg%3E");
    }
    .right-icon {
        height: 18px;
@@ -38,7 +38,7 @@
        svg {
            width: 12px;
            height: 12px;
-            fill:rgba(211,125,066,1);
+            fill: rgba(211, 125, 066, 1);
        }
    }
    .wrap {
@@ -46,13 +46,11 @@
        height: 24px;
        overflow: hidden;
        position: relative;
-        color: rgba(211,125,066,1);
+        color: rgba(211, 125, 066, 1);
    }
-
    .content {
        position: absolute;
        white-space: nowrap;
-
        &.van-ellipsis {
            max-width: 100%;
        }
@@ -60,16 +58,19 @@
    .play {
        animation: van-notice-bar-play linear both;
    }
-    
    .play-infinite {
-         animation: van-notice-bar-play-infinite linear infinite both;
+        animation: van-notice-bar-play-infinite linear infinite both;
    }
 }

 @keyframes van-notice-bar-play {
-    to { transform: translate3d(-100%, 0, 0); }
+    to {
+        transform: translate3d(-100%, 0, 0);
+    }
 }
-  
+
 @keyframes van-notice-bar-play-infinite {
-    to { transform: translate3d(-100%, 0, 0); }
+    to {
+        transform: translate3d(-100%, 0, 0);
+    }
 }
\ No newline at end of file
--- a/src/packages/noticebar/noticebar.vue
+++ b/src/packages/noticebar/noticebar.vue
@@ -96,7 +96,7 @@ export default {
      if(this.leftIcon){
        iconBg=this.leftIcon;
      }else{
-        iconBg="data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23D68048' d='M509.7 960.1c-53.5 0-106.1-9-156.6-26.8l-.2-.1c-8-2.9-14.5-8.7-18.1-16.4-3.7-7.7-4.1-16.4-1.2-24.4 4.7-12.7 17-21.3 30.6-21.3 3.7 0 7.4.6 11 1.9 43.3 15.2 88.6 22.9 134.5 22.9 47.2 0 93.7-8.1 138.1-24.2l.8-.3c3.7-1.4 7.5-2 11.3-2 13.4 0 25.7 8.4 30.5 21l.1.2c2.9 8 2.5 16.7-1.1 24.4-3.6 7.8-10 13.6-18 16.6-52.1 18.9-106.4 28.5-161.7 28.5zM219.3 824c-60 0-108.7-48.2-108.7-107.4v-4c0-21.6 6.4-42.4 18.5-60.2 12.2-17.8 29.2-31.3 49.3-39.1l7.1-2.8v-165c0-79.8 29.8-156.4 84-215.8 53.8-59 127-96.2 206.3-105l10-1.1V90.2c0-14.5 11.8-26.4 26.4-26.4 14.5 0 26.4 11.8 26.4 26.4v33.4l10 1.1c79.2 8.7 152.4 46 206.1 105 54.1 59.4 83.9 136 83.9 215.8v165.1l7.1 2.8c20.1 7.8 37.1 21.3 49.3 39.1 12.2 17.8 18.6 38.6 18.6 60.1v4c0 28.4-11.1 55.2-31.3 75.4-20.6 20.6-48 32-77.2 32H219.3zm-16.6-152.8c-16.9 6.8-28 23.5-27.7 41.6v3.8c-.2 24.5 19.5 44.7 44.1 45h585.7c11.5-.1 22.3-4.5 30.5-12.5 8.6-8.4 13.6-20.2 13.5-32.3l.1-3.9c.3-18.1-10.8-34.9-27.6-41.6L774 652.6V445.5c0-143.6-117.5-260.4-262-260.4S250 301.9 250 445.5v207.1l-47.3 18.6z'/%3E%3C/svg%3E";
+        iconBg="data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(214,128,72)' d='M509.7 960.1c-53.5 0-106.1-9-156.6-26.8l-.2-.1c-8-2.9-14.5-8.7-18.1-16.4-3.7-7.7-4.1-16.4-1.2-24.4 4.7-12.7 17-21.3 30.6-21.3 3.7 0 7.4.6 11 1.9 43.3 15.2 88.6 22.9 134.5 22.9 47.2 0 93.7-8.1 138.1-24.2l.8-.3c3.7-1.4 7.5-2 11.3-2 13.4 0 25.7 8.4 30.5 21l.1.2c2.9 8 2.5 16.7-1.1 24.4-3.6 7.8-10 13.6-18 16.6-52.1 18.9-106.4 28.5-161.7 28.5zM219.3 824c-60 0-108.7-48.2-108.7-107.4v-4c0-21.6 6.4-42.4 18.5-60.2 12.2-17.8 29.2-31.3 49.3-39.1l7.1-2.8v-165c0-79.8 29.8-156.4 84-215.8 53.8-59 127-96.2 206.3-105l10-1.1V90.2c0-14.5 11.8-26.4 26.4-26.4 14.5 0 26.4 11.8 26.4 26.4v33.4l10 1.1c79.2 8.7 152.4 46 206.1 105 54.1 59.4 83.9 136 83.9 215.8v165.1l7.1 2.8c20.1 7.8 37.1 21.3 49.3 39.1 12.2 17.8 18.6 38.6 18.6 60.1v4c0 28.4-11.1 55.2-31.3 75.4-20.6 20.6-48 32-77.2 32H219.3zm-16.6-152.8c-16.9 6.8-28 23.5-27.7 41.6v3.8c-.2 24.5 19.5 44.7 44.1 45h585.7c11.5-.1 22.3-4.5 30.5-12.5 8.6-8.4 13.6-20.2 13.5-32.3l.1-3.9c.3-18.1-10.8-34.9-27.6-41.6L774 652.6V445.5c0-143.6-117.5-260.4-262-260.4S250 301.9 250 445.5v207.1l-47.3 18.6z'/%3E%3C/svg%3E";
      }
      return iconBg;
    },

--- a/src/packages/rate/demo.vue
+++ b/src/packages/rate/demo.vue
@@ -10,13 +10,13 @@
            </nut-cell>
        </div>

-        <h4>事件</h4>
+        <h4>只读</h4>
        <div>
            <nut-cell>
-                <span slot="title"><nut-rate @click="onClick"></nut-rate></span>
+                <span slot="title"><nut-rate v-model="val2" :readOnly="true"></nut-rate></span>
            </nut-cell>
            <nut-cell>
-                <span slot="title">结果：{{result}}</span>
+                <span slot="title">结果：{{val2}}</span>
            </nut-cell>
        </div>

@@ -24,11 +24,21 @@
        <div>
            <nut-cell>
                <span slot="title"><nut-rate
-                :size="35"
+                :size="30"
                ></nut-rate></span>
            </nut-cell>
        </div>

+        <h4>事件</h4>
+        <div>
+            <nut-cell>
+                <span slot="title"><nut-rate @click="onClick"></nut-rate></span>
+            </nut-cell>
+            <nut-cell>
+                <span slot="title">结果：{{result}}</span>
+            </nut-cell>
+        </div>
+
        <h4>自定义ICON</h4>
        <div>
            <nut-cell>
@@ -38,6 +48,7 @@
                ></nut-rate></span>
            </nut-cell>
        </div>
+        
    </div>
 </template>

@@ -46,7 +57,9 @@ export default {
    data(){
        return{
            val:4,
+            val2:2,
            result:'',
+            result2:'',
            icon1:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`,
            icon2:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`
        }
@@ -55,6 +68,9 @@ export default {
    methods:{
        onClick(idx){
            this.result = '您点击了第'+idx+'个!';
+        },
+        onClick2(idx){
+            this.result2 = '您点击了第'+idx+'个!';
        }
    }
 }

--- a/src/packages/rate/doc.md
+++ b/src/packages/rate/doc.md
@@ -5,10 +5,22 @@
 ## 基础用法

 ```html
-<nut-rate>
+<nut-rate 
+    v-model="val"
+>
 </nut-rate>
 ```

+只读
+```html
+<nut-rate 
+    v-model="val"
+    :readOnly="true"
+>
+</nut-rate>
+```
+
+
 绑定事件

 ```html
@@ -41,13 +53,14 @@
 | 字段 | 说明 | 类型 | 默认值
 | ----- | ----- | ----- | -----
 | total | star 总数 | Number | 5
-| value | 当前 star 数，可以使用 v-model 双向绑定数据 | Number | 3
+| value | 当前 star 数，可使用 v-model 双向绑定数据 | Number | 3
 | size | star 大小 | Number | 25
 | spacing | 两个star的间距 | Number | 20
+| readOnly | 是否只读 | Boolean | false
 | uncheckedIcon | 使用图标(未选中) | String | -
 | checkedIcon | 使用图标(选中) | String | -

 ## Event
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| click | 点击star市触发 | star的index
\ No newline at end of file
+| click | 点击star时触发 | star的index
\ No newline at end of file
--- a/src/packages/rate/rate.vue
+++ b/src/packages/rate/rate.vue
@@ -38,9 +38,9 @@ export default {
            type:String,
            default:null
        },
-        testProp:{
-            type:String,
-            default:null
+        readOnly:{
+            type:Boolean,
+            default: false
        },
        spacing:{
            type:[String,Number],
@@ -57,9 +57,14 @@ export default {
    },
    methods: {
        onClick($event,idx){
-            this.current = idx;
-            this.$emit('input',idx);
-            this.$emit('click',idx);
+            if(this.readOnly){
+                this.$emit('input',this.current);
+                this.$emit('click',this.current);
+            }else{
+                this.current = idx;
+                this.$emit('input',idx);
+                this.$emit('click',idx);
+            }
        }
    }
 }

--- a/src/packages/scroller/demo.vue
+++ b/src/packages/scroller/demo.vue
+<template>
+    <div class="demo-list">
+        <nut-noticebar
+            :closeMode="true"
+            v-if="!isMobile"
+        >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
+        <h4>横向用法</h4>
+        <div class="hor-panel">
+            <nut-scroller :list-data="listData"  
+                :is-un-more="isUnMore" 
+                :is-loading="isLoading"
+                @loadMore="loadMoreHor"
+                @jump="jump()"
+            >
+                <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">{{index}}</div>
+                <slot slot="more"><div class="nut-hor-jump-more">释放查看更多</div></slot>
+            </nut-scroller>
+        </div>
+        <h4>竖向用法</h4>
+        <div class="vert-panel">
+            <nut-scroller
+                :is-un-more="isUnMore1" 
+                :is-loading="isLoading1"
+                :type="'vertical'"
+                @loadMore="loadMoreVert"
+                @pulldown="pulldown"
+            > 
+                <div slot="list" class="nut-vert-list-panel">
+                    <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
+                        {{index}}
+                    </div>
+                </div>
+            </nut-scroller>
+        </div>
+        <h4>竖向不满一屏用法</h4>
+        <div class="vert-panel">
+            <nut-scroller
+                :is-un-more="isUnMore2" 
+                :is-loading="isLoading2"
+                :type="'vertical'"
+                @loadMore="loadMoreVert2"
+                @pulldown="pulldown2"
+            > 
+                <div slot="list" class="nut-vert-list-panel">
+                    <div class="nut-vert-list-item" v-for="(item, index) of listData2" :key="index">
+                        {{index}}
+                    </div>
+                </div>
+            </nut-scroller>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+            listData1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+            listData2: [1, 2],
+            isUnMore: false,
+            isLoading: false,
+            maxPages: 3,
+            page: 2,
+            timers: null,
+            isUnMore1: false,
+            isLoading1: false,
+            page1: 2,
+            maxPages2: 1,
+            isUnMore2: false,
+            isLoading2: false,
+            page2: 2
+        };
+    },
+
+    methods: {
+        loadMoreHor() {
+            this.isLoading = true;
+            if (this.page > this.maxPages) {
+                this.isUnMore = true;
+                this.isLoading = false;
+            } else {
+                this.timer = setTimeout(() => {
+                    this.page == ++this.page;
+                    this.listData = [...this.listData, ...[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]];
+                    console.log(this.listData);
+                    this.isLoading = false;
+                }, 300);
+            }
+        },
+
+        jump() {
+            console.log('跳转');
+            location.href = 'http://www.jd.com';
+        },
+
+        loadMoreVert() {
+            this.isLoading1 = true;
+            if (this.page1 > this.maxPages) {
+                this.isUnMore1 = true;
+                this.isLoading1 = false;
+            } else {
+                this.timer = setTimeout(() => {
+                    this.page1 = ++this.page1;
+                    this.listData1 = [...this.listData1, ...[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]];
+                    console.log(this.listData1);
+                    this.isLoading1 = false;
+                }, 2000);
+            }
+        },
+
+        pulldown() {
+            this.isLoading1 = true;
+            this.timer = setTimeout(() => {
+                this.page1 = 2;
+                this.listData1 = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
+                this.isLoading1 = false;
+                this.isUnMore1 = false;
+            }, 2000);
+        },
+
+
+        loadMoreVert2() {
+            this.isLoading2 = true;
+            if (this.page2 > this.maxPages2) {
+                this.isUnMore2 = true;
+                this.isLoading2 = false;
+            } else {
+                this.timer = setTimeout(() => {
+                    this.page2 = ++this.page1;
+                    this.listData2 = [...this.listData1, ...[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]];
+                    console.log(this.listData1);
+                    this.isLoading2 = false;
+                }, 2000);
+            }
+        },
+
+        pulldown2() {
+            this.isLoading2 = true;
+            this.timer = setTimeout(() => {
+                this.page2 = 2;
+                this.listData2 = [11, 12];
+                this.isLoading2 = false;
+                this.isUnMore2 = false;
+            }, 2000);
+        }
+    },
+    
+    destroyed() {
+        clearTimeout(this.timer);
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.hor-panel{
+    height: 100px;
+    background-color: mix($primary-color, #FFF, 10%);
+}
+.nut-hor-list{
+    .nut-hor-list-item{
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 200px;
+        height: 100px;
+        background-color: mix($primary-color, #FFF, 90%);
+        color: #FFF;
+        line-height: 100px;
+        margin-left: 10px;
+    }
+}
+.nut-hor-jump-more{
+    height: 100%;
+    width: 20px;
+    padding: 5px 10px;
+    font-size: 12px;
+    text-align: center;
+    color: $primary-color;
+}
+
+.vert-panel{
+    height: 400px; 
+    padding: 10px; 
+    background-color: mix($primary-color, #FFF, 10%);
+}
+.nut-vert-list-panel{
+    .nut-vert-list-item{
+        width: 100%;
+        height: 100px;
+        margin-bottom: 10px;
+        background-color: mix($primary-color, #FFF, 90%);
+        font-size: 12px;
+        text-align: center;
+        line-height: 100px;
+        color: #FFF;
+    }
+}
+</style>
--- a/src/packages/scroller/doc.md
+++ b/src/packages/scroller/doc.md
--- a/src/packages/scroller/horizontal-scroll.vue
+++ b/src/packages/scroller/horizontal-scroll.vue
+<template>
+    <div class="nut-hor-scroll" rel="wrapper">
+        <div class="nut-hor-list" ref="list">
+            <slot name="list"></slot>
+            <div class="nut-hor-control" v-if="isUnMore && $slots.more && isShowLoadMore()">
+                <slot name="more"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-hor-scroll',
+    props: {
+        listData: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        lineSpacing: {
+            type: Number,
+            default: 210
+        },
+        stretch: {
+            type: Number,
+            default: 200
+        },
+        isUnMore: {
+            type: Boolean,
+            default: false
+        },
+        isLoading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            touchParams: {
+                startX: 0, 
+                endX: 0, 
+                startTime: 0, 
+                endTime: 0
+            },
+            transformX: 0,
+            scrollDistance: 0,
+            timer: null
+        }
+    },
+    methods: {
+        isShowLoadMore() {
+            this.$nextTick(() => {
+                let wrapH = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                let listH = this.listData.length * this.lineSpacing;
+                if (wrapH <= listH) {
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+        },
+        setTransform(translateX = 0, type, time = 500) {
+            if (type === 'end') {
+                this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
+            } else {
+                this.$refs.list.style.webkitTransition = '';
+            }
+            this.$refs.list.style.webkitTransform = `translate3d(${translateX}px, 0, 0)`;
+            this.scrollDistance = translateX;
+        },
+
+        setMove(move, type, time) {
+            let updateMove = move + this.transformX;
+            let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            let offsetWidth = this.lineSpacing * this.listData.length;
+            if (type === 'end') {
+                if (updateMove > 0) {
+                    updateMove = 0;
+                } else if (updateMove < -offsetWidth + w) {
+                    if (-offsetWidth + w <= 0) {
+                        updateMove = -offsetWidth + w;
+                    } else {
+                        updateMove = 0;
+                    }
+                }
+                this.setTransform(updateMove, type, time)
+            } else {
+                let maxMove =  -offsetWidth + w;
+                if (updateMove > 0 && updateMove > this.stretch) {
+                    updateMove = this.stretc;
+                } else if (updateMove < maxMove - this.stretch) {
+                    if (maxMove <= 0) {
+                        updateMove  = maxMove - this.stretch;
+                    } else {
+                        updateMove =  updateMove < -this.stretch ? -this.stretch : updateMove;
+                    }
+                }
+                this.setTransform(updateMove, null, null);
+            }
+        },
+	
+	    touchStart(event) {
+            event.preventDefault();
+
+            let changedTouches = event.changedTouches[0];
+            this.touchParams.startX = changedTouches.pageX;
+            this.touchParams.startTime = event.timestamp || Date.now();
+            this.transformX = this.scrollDistance;
+        },
+
+        touchMove(event) {
+
+            let changedTouches = event.changedTouches[0];
+            this.touchParams.lastX = changedTouches.pageX;
+            this.touchParams.lastTime = event.timestamp || Date.now();
+            let move = this.touchParams.lastX - this.touchParams.startX;
+
+            this.setMove(move);
+        },
+
+        touchEnd(event) {
+            event.preventDefault();
+
+            let changedTouches = event.changedTouches[0];
+            this.touchParams.lastX = changedTouches.pageX;
+            this.touchParams.lastTime = event.timestamp || Date.now();
+            let move = this.touchParams.lastX - this.touchParams.startX;
+
+            let moveTime = this.touchParams.lastTime - this.touchParams.startTime;
+            let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            let maxMove = -this.lineSpacing * this.listData.length + w;
+
+            // 释放跳转之类
+            if (this.isUnMore && move < 0 && (move + this.transformX) < maxMove - 50) {
+                //this.$emit('jump');
+            }
+            
+            // 加载更多
+            if (!this.isLoading && !this.isUnMore && move < 0 && (move + this.transformX) < maxMove + 2 * w) {
+                this.$emit('loadMore');
+            }
+
+            if (moveTime <= 300) {
+                move = move * 2;
+                if (move < 0 && move + this.transformX < maxMove) {
+                    move = maxMove - this.transformX;
+                }
+                moveTime = moveTime + 500;
+                this.setMove(move, 'end', moveTime);
+            } else {
+                this.setMove(move, 'end');
+            }
+        }
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            // 监听
+            this.$el.addEventListener('touchstart', this.touchStart);
+            this.$el.addEventListener('touchmove', this.touchMove);
+            this.$el.addEventListener('touchend', this.touchEnd);
+        });
+    },
+    beforeDestroy() {
+        // 移除监听
+        this.$el.removeEventListener('touchstart', this.touchStart);
+        this.$el.removeEventListener('touchmove', this.touchMove);
+        this.$el.removeEventListener('touchend', this.touchEnd);
+        clearTimeout(this.timer);
+    }
+}
+</script>
+
--- a/src/packages/scroller/index.js
+++ b/src/packages/scroller/index.js
+import Scroller from './scroller.vue';
+import './scroller.scss';
+
+Scroller.install = function(Vue) {
+  Vue.component(Scroller.name, Scroller);
+};
+
+export default Scroller
\ No newline at end of file
--- a/src/packages/scroller/scroller.scss
+++ b/src/packages/scroller/scroller.scss
+@import "../../styles/animation/rotate";
+
+.nut-scroller{
+    display: flex;
+    height: 100%;
+}
+// 横向滚动 
+.nut-hor-scroll{
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    .nut-hor-list{
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        box-orient: horizontal;
+        box-direction: normal;
+    }
+    .nut-hor-control{
+        height: 100%;
+    }
+}
+
+// 竖向滚动
+.nut-vert-scroll{
+    flex: 1;
+    overflow: hidden;
+    .nut-vert-list{
+        width: 100%;
+        position: relative;
+    }
+    .nut-vert-pulldown{
+        position: absolute;
+        top: -50px;
+        width: 100%;
+    }
+    .nut-vert-loadmore, .nut-vert-pulldown, .nut-vert-unloadmore{
+        height: 50px;
+        text-align: center;
+        line-height: 50px;
+        font-size: 12px;
+        color: $text-color;
+        .nut-vert-pulldown-status, .nut-vert-loadmore-status{
+            height: 50px;
+        }
+        .nut-vert-loading{
+            height: 20px;
+            width: 20px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAP1BMVEUAAAD0KA/xJhHxJA7yJA7xJA7xJA7xJA7xJA7wJA7xJA7xJA7xJA7xJA7xJA7xJA3xJA7xJA7xJA7xJA7xJA5JCyllAAAAFXRSTlMACxdEI3NalDdn3LyvLstPoveIgOl7Sm+EAAABiklEQVRIx9XS0W7kIAxAUWyDwckAIfD/37owUyndbbMJrtSq92UeoiMbGHMWRqKciSKamSw5v23b462d7T0HVIc76NrbGK8h+153vgozi9u39ZW7wOSfSYB3pyY3JqdV4ByiG86FTw6xrSmlx+mZ4757X8PJPo/Uo5OPe4/MaTwGy6dfOvz/VeAY7OGjrPvOcHH9PqXFf9i21krmMrcsi/vnhg55bfPfr1Irm1v5bqM5ElcF7lFYl2WF46DOOTA3w/TuuNBlMLeTvjIeQ8XcD9LS9mOoNRPl1t7GBufYTLW29jotP4dOjk2mhyJi5oKltfG2UYTMZL4VN6aL2FnKpTzGjwjMUiyl9b1F2Ey3lILjlvI8XUshY5lpnm6l8KBhnvpSxETmOE/3UpySjo6Fv5UiMykp5JyNsk5BSUPOqL2nnKP2sERklHWq3pgoaDf+nWPVfwsK6rcNIVilxW7xB6wNMVqtjXqLnVrQWbAj+IJFHcanRQAlxhH0xiJza7/owIrpMOBrsK4L9wckTA/GBoy0fQAAAABJRU5ErkJggg==) no-repeat 0 0;
+            background-size: 100%;
+            animation: rotation 2s linear infinite;
+        }
+        .nut-vert-loading-txt{
+            height: 50px;
+            padding-left: 5px;
+        }
+        .nut-vert-loading, .nut-vert-loading-txt{
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
\ No newline at end of file
--- a/src/packages/scroller/scroller.vue
+++ b/src/packages/scroller/scroller.vue
+<template>
+    <div class="nut-scroller">
+        <template v-if="type === 'vertical'">
+            <nut-vert-scroll 
+                :stretch="stretch"
+                :is-un-more="isUnMore"
+                :is-loading="isLoading"
+                @loadMore="loadMore"
+                @pulldown="pulldown"
+            >
+                <slot name="list"  slot="list"></slot>
+            </nut-vert-scroll>
+        </template>
+        <template v-else-if="type === 'horizontal'">
+            <nut-hor-scroll :list-data="listData"
+                :line-spacing="lineSpacing"
+                :stretch="stretch"
+                :is-un-more="isUnMore"
+                :is-loading="isLoading"
+                @loadMore="loadMore"
+                @jump="jump"
+            >
+                <slot name="list"  slot="list"></slot>
+                <slot name="more"  slot="more"></slot>
+            </nut-hor-scroll>
+        </template>
+    </div>
+</template>
+<script>
+import nutVertScroll from "./vertical-scroll.vue";
+import nutHorScroll from "./horizontal-scroll.vue";
+export default {
+    name:'nut-scroller',
+    props: {
+        type: {
+            type: String,
+            default: 'horizontal' // horizontal vertical
+        },
+        listData: {
+            type: Array,
+            default: () => []
+        },
+        lineSpacing: {
+            type: Number,
+            default: 210
+        },
+        stretch: {
+            type: Number,
+            default: 200
+        },
+        isUnMore: {
+            type: Boolean,
+            default: false
+        },
+        isLoading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {};
+    },
+    components: {
+        [nutVertScroll.name]: nutVertScroll,
+        [nutHorScroll.name]: nutHorScroll
+    },
+    methods: {
+        loadMore() {
+            this.$emit('loadMore');
+        },
+
+        jump() {
+            this.$emit('jump');
+        },
+
+        pulldown() {
+            this.$emit('pulldown');
+        }
+    }
+}
+</script>
\ No newline at end of file
--- a/src/packages/scroller/vertical-scroll.vue
+++ b/src/packages/scroller/vertical-scroll.vue
+<template>
+    <div class="nut-vert-scroll" ref="wrapper">
+        <div class="nut-vert-list" ref="list">
+            <div class="nut-vert-pulldown">
+                <div class="nut-vert-pulldown-txt" v-if="!isLoading">{{pulldownTxt}}</div>
+                <div class="nut-vert-pulldown-status" v-else>
+                    <span class="nut-vert-loading"></span>
+                    <span class="nut-vert-loading-txt">加载中...</span>
+                </div>
+            </div>
+            <slot name="list"></slot>
+            <div class="nut-vert-loadmore" v-if="!isUnMore && isShowLoadMore()">
+                <div class="nut-vert-load-txt" v-if="!isLoading">{{loadMoreTxt}}</div>
+                <div class="nut-vert-load-status" v-else>
+                    <span class="nut-vert-loading"></span>
+                    <span class="nut-vert-loading-txt">加载中...</span>
+                </div>
+            </div>
+            <div v-else-if="isUnMore" class="nut-vert-unloadmore" >
+                <div class="nut-vert-unloadmore-txt">{{unloadMoreTxt}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-vert-scroll',
+    props: {
+        stretch: {
+            type: Number,
+            default: 50
+        },
+        isUnMore: {
+            type: Boolean,
+            default: false
+        },
+        isLoading: {
+            type: Boolean,
+            default: false
+        },
+        pulldownTxt: {
+            type: String,
+            default: '下拉刷新'
+        },
+        loadMoreTxt: {
+            type: String,
+            default: '上拉加载'
+        },
+        unloadMoreTxt: {
+            type: String,
+            default: '没有更多了'
+        }
+    },
+    watch: {
+        'isLoading': function(status) {
+            if (!status && this.realMove === 0) {
+                clearTimeout(this.timer);
+                this.setTransform(this.realMove, 'end', 0);
+            }
+        }
+    },
+    data() {
+        return {
+            touchParams: {
+                startY: 0, 
+                endY: 0, 
+                startTime: 0, 
+                endTime: 0
+            },
+            translateY: 0,
+            scrollDistance: 0,
+            timer: null,
+            timerEmit: null,
+            realMove: 0
+        }
+    },
+
+    methods: {
+        isShowLoadMore() {
+            this.$nextTick(() => {
+                let wrapH = this.$refs.wrapper.offsetHeight;
+                let listH = this.$refs.list.offsetHeight;
+                if (wrapH <= listH) {
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+        },
+
+        setTransform(translateY = 0, type, time = 500) {
+            if (type === 'end') {
+                this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
+            } else {
+                this.$refs.list.style.webkitTransition = '';
+            }
+            this.$refs.list.style.webkitTransform = `translate3d(0, ${translateY}px, 0)`;
+            this.scrollDistance = translateY;
+        },
+
+        setMove(move, type, time) {
+            let updateMove = move + this.translateY;
+            let h = this.$refs.wrapper.offsetHeight;
+            let maxMove = -this.$refs.list.offsetHeight + h;
+            if (type === 'end') {
+                if (updateMove > 0) {
+                    updateMove = 50;
+                    this.realMove = 0;
+                    if (!this.isLoading) {
+                        clearTimeout(this.timerEmit);
+                        this.timerEmit = setTimeout(() => {
+                            this.$emit('pulldown');
+                        }, time / 2);
+                    }
+                } else if (updateMove < maxMove) {
+                    if (maxMove <= 0) {
+                        updateMove = maxMove;
+                    } else {
+                        updateMove = 0;
+                    }
+                    this.realMove = maxMove;
+                    if (!this.isLoading && !this.isUnMore) {
+                        clearTimeout(this.timerEmit);
+                        this.timerEmit = setTimeout(() => {
+                            this.$emit('loadMore');
+                        }, time / 2);
+                    }
+                }
+                if (updateMove == 50 && !this.isLoading) {
+                    clearTimeout(this.timer);
+                    this.timer = setTimeout(() => {
+                        this.setTransform(this.realMove, 'end', null);
+                    }, 3000);
+                }
+                this.setTransform(updateMove, type, time)
+            } else {
+                // if (updateMove > 0 && updateMove > this.stretch) {
+                //     updateMove = this.stretc;
+                // } else if (updateMove < maxMove - this.stretch) {
+                //     updateMove = maxMove - this.stretch;
+                // }
+                this.setTransform(updateMove, null, null);
+            }
+        },
+	
+	    touchStart(event) {
+            event.preventDefault();
+
+            let changedTouches = event.changedTouches[0];
+            this.touchParams.startY = changedTouches.pageY;
+            this.touchParams.startTime = event.timestamp || Date.now();
+            this.translateY = this.scrollDistance;
+        },
+
+        touchMove(event) {
+
+            let changedTouches = event.changedTouches[0];
+            this.touchParams.lastY = changedTouches.pageY;
+            this.touchParams.lastTime = event.timestamp || Date.now();
+            let move = this.touchParams.lastY - this.touchParams.startY;
+
+            this.setMove(move);
+        },
+
+        touchEnd(event) {
+            event.preventDefault();
+
+            let changedTouches = event.changedTouches[0];
+            this.touchParams.lastY = changedTouches.pageY;
+            this.touchParams.lastTime = event.timestamp || Date.now();
+            let move = this.touchParams.lastY - this.touchParams.startY;
+
+            let moveTime = this.touchParams.lastTime - this.touchParams.startTime;
+            let h = this.$refs.wrapper.offsetHeight;
+            let maxMove = -this.$refs.list.offsetHeight + h;
+
+            if (moveTime <= 300) {
+                move = move * 2;
+                if (move < 0 && move < maxMove) {
+                    move = maxMove;
+                }
+                moveTime = moveTime + 500;
+                this.setMove(move, 'end', moveTime);
+            } else {
+                this.setMove(move, 'end');
+            }
+        }
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            // 监听
+            this.$el.addEventListener('touchstart', this.touchStart);
+            this.$el.addEventListener('touchmove', this.touchMove);
+            this.$el.addEventListener('touchend', this.touchEnd);
+        });
+    },
+    beforeDestroy() {
+        // 移除监听
+        this.$el.removeEventListener('touchstart', this.touchStart);
+        this.$el.removeEventListener('touchmove', this.touchMove);
+        this.$el.removeEventListener('touchend', this.touchEnd);
+        clearTimeout(this.timer);
+        clearTimeout(this.timerEmit);
+    }
+}
+</script>
+
--- a/src/packages/shortpassword/shortpassword.scss
+++ b/src/packages/shortpassword/shortpassword.scss
@@ -97,7 +97,7 @@ ul {
            height: 19px;
            width: 19px;
            display: inline-block;
-            background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d2d2d2' viewBox='0 0 30 30'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat;
+            background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(210,210,210)' viewBox='0 0 30 30'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 15px;
@@ -162,7 +162,7 @@ ul {
                display: inline-block;
                width: 12px;
                height: 12px;
-                background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M.5 12c0 6.351 5.149 11.5 11.5 11.5S23.5 18.351 23.5 12 18.351.5 12 .5.5 5.649.5 12z' stroke='%230c0c0c' fill-opacity='0'/%3E%3Cpath  fill='%230c0c0c' d='M10.909 4.364h2.182v2.182h-2.182zM10.909 8.727h2.182v10.909h-2.182z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
+                background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M.5 12c0 6.351 5.149 11.5 11.5 11.5S23.5 18.351 23.5 12 18.351.5 12 .5.5 5.649.5 12z' stroke='rgb(12,12,12)' fill-opacity='0'/%3E%3Cpath  fill='rgb(12,12,12)' d='M10.909 4.364h2.182v2.182h-2.182zM10.909 8.727h2.182v10.909h-2.182z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
                background-size: 100% 100%;
                vertical-align: middle;
                margin: -4px 5px 0 0;

--- a/src/packages/toast/demo.vue
+++ b/src/packages/toast/demo.vue
@@ -109,7 +109,7 @@ export default {
      this.$toast.text(msg, { duration });
    },
    sucToast(msg) {
-      this.$toast.success(msg);
+      this.$toast.success(msg, { duration:8000 });
    },
    failToast(msg) {
      this.$toast.fail(msg);

--- a/src/packages/toast/toast.scss
+++ b/src/packages/toast/toast.scss
@@ -52,13 +52,13 @@
            background-repeat: no-repeat;
            background-size: 100%;
            &.success {
-                background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.7'%3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='%23FFF'/%3E%3Cpath d='M43.562 3L22.01 23.803l-4.855-4.557a2.934 2.934 0 0 0-4.147.132l-1.324 1.41a1 1 0 0 0 .045 1.414l9.047 8.49a2 2 0 0 0 2.763-.025L47.741 7.12 43.562 3z' fill='%232C2A35'/%3E%3C/g%3E%3C/svg%3E");
+                background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' %3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='rgb(255,255,255)'/%3E%3Cpath d='M43.562 3L22.01 23.803l-4.855-4.557a2.934 2.934 0 0 0-4.147.132l-1.324 1.41a1 1 0 0 0 .045 1.414l9.047 8.49a2 2 0 0 0 2.763-.025L47.741 7.12 43.562 3z' fill='rgb(44,42,53)'/%3E%3C/g%3E%3C/svg%3E");
            }
            &.fail {
-                background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='%23FFF'/%3E%3Cg fill='%232C2A35'%3E%3Cpath d='M13.6 15.722l1.415-1.414a2 2 0 0 1 2.828 0L33.4 29.864a1 1 0 0 1 0 1.414l-1.414 1.414a2 2 0 0 1-2.828 0L13.6 17.136a1 1 0 0 1 0-1.414z'/%3E%3Cpath d='M33.4 15.722l-1.415-1.414a2 2 0 0 0-2.828 0L13.6 29.864a1 1 0 0 0 0 1.414l1.414 1.414a2 2 0 0 0 2.828 0L33.4 17.136a1 1 0 0 0 0-1.414z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+                background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='rgb(255,255,255)'/%3E%3Cg fill='rgb(44,42,53)'%3E%3Cpath d='M13.6 15.722l1.415-1.414a2 2 0 0 1 2.828 0L33.4 29.864a1 1 0 0 1 0 1.414l-1.414 1.414a2 2 0 0 1-2.828 0L13.6 17.136a1 1 0 0 1 0-1.414z'/%3E%3Cpath d='M33.4 15.722l-1.415-1.414a2 2 0 0 0-2.828 0L13.6 29.864a1 1 0 0 0 0 1.414l1.414 1.414a2 2 0 0 0 2.828 0L33.4 17.136a1 1 0 0 0 0-1.414z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
            &.warn {
-                background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='%23FFF'/%3E%3Cpath d='M23 23V12' stroke='%232C2A35' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M21 30h3a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1h-3a2 2 0 0 1-2-2v-3a1 1 0 0 1 1-1z' fill='%232C2A35'/%3E%3C/g%3E%3C/svg%3E");
+                background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='rgb(255,255,255)'/%3E%3Cpath d='M23 23V12' stroke='rgb(44,42,53)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M21 30h3a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1h-3a2 2 0 0 1-2-2v-3a1 1 0 0 1 1-1z' fill='rgb(44,42,53)'/%3E%3C/g%3E%3C/svg%3E");
            }
            &.loading {
                background: url("data:image/svg+xml, %3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(230,230,230)' d='M874.667 533.333h-192c-12.8 0-21.334-8.533-21.334-21.333 0-12.8 8.534-21.333 21.334-21.333h192c12.8 0 21.333 8.533 21.333 21.333 0 12.8-8.533 21.333-21.333 21.333zM648.533 407.467C640 416 627.2 416 618.667 407.467c-8.534-8.534-8.534-21.334 0-29.867L755.2 241.067c8.533-8.534 21.333-8.534 29.867 0 8.533 8.533 8.533 21.333 0 29.866L648.533 407.467zM512 896c-12.8 0-21.333-8.533-21.333-21.333v-192c0-12.8 8.533-21.334 21.333-21.334s21.333 8.534 21.333 21.334v192c0 12.8-8.533 21.333-21.333 21.333zm0-533.333c-12.8 0-21.333-8.534-21.333-21.334v-192c0-12.8 8.533-21.333 21.333-21.333s21.333 8.533 21.333 21.333v192c0 12.8-8.533 21.334-21.333 21.334zM270.933 782.933c-8.533 8.534-21.333 8.534-29.866 0s-8.534-21.333 0-29.866L377.6 616.533c8.533-8.533 21.333-8.533 29.867 0 8.533 8.534 8.533 21.334 0 29.867L270.933 782.933zm104.534-375.466L238.933 270.933c-8.533-8.533-8.533-21.333 0-29.866s21.334-8.534 29.867 0L405.333 377.6c8.534 8.533 8.534 21.333 0 29.867-6.4 6.4-21.333 6.4-29.866 0zM362.667 512c0 12.8-8.534 21.333-21.334 21.333h-192C136.533 533.333 128 524.8 128 512c0-12.8 8.533-21.333 21.333-21.333h192c12.8 0 21.334 8.533 21.334 21.333zm285.866 104.533l136.534 136.534c8.533 8.533 8.533 21.333 0 29.866-8.534 8.534-21.334 8.534-29.867 0L618.667 646.4c-8.534-8.533-8.534-21.333 0-29.867 6.4-6.4 21.333-6.4 29.866 0z'/%3E%3C/svg%3E") no-repeat;

--- a/types/nutui.d.ts
+++ b/types/nutui.d.ts
@@ -44,6 +44,8 @@ export declare class Tab extends UIComponent {}
 export declare class Tabbar extends UIComponent {}
 export declare class TabPanel extends UIComponent {}
 export declare class Toast extends UIComponent {}
+export declare class BackTop extends UIComponent {}
+export declare class Scroller extends UIComponent {}

 export interface InstallationOptions {
    locale?: any