Browse Source

upd: 1.0.0

richard1015 5 years ago
parent
commit
672d998449

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-jdl",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

+ 1 - 1
src/config.json

@@ -406,7 +406,7 @@
             "type": "component",
             "sort": "0",
             "star": 4,
-            "showDemo": true,
+            "showDemo": false,
             "author": "iris、richard1015"
         },
         {

+ 1 - 1
src/nutui.js

@@ -129,7 +129,7 @@ const packages = {
   Menu,
   ImagePreview,
   Badge,
-  Field: Field,
+  Field,
   Card,
   Infiniteloading,
   Scroll,

+ 2 - 2
src/packages/scroll/demo.vue

@@ -3,7 +3,7 @@
     <div class="demo-item">
       <h4>上拉刷新&&无限加载</h4>
       <div class="scroll-box">
-        <nut-pullrefresh-loadmore
+        <nut-scroll
           class="page-content"
           :on-refresh="onRefresh"
           :on-infinite="onInfinite"
@@ -14,7 +14,7 @@
           <div v-for="(item, index) in items" :key="index" @click="onItemClick(index)" class="item">
             {{ item }}
           </div>
-        </nut-pullrefresh-loadmore>
+        </nut-scroll>
       </div>
     </div>
   </div>

+ 2 - 2
src/packages/scroll/doc.md

@@ -3,12 +3,12 @@
 ## 基本用法
 
 ```html
-<nut-pullrefresh-loadmore 
+<nut-scroll 
   :on-refresh="onRefresh"
   :on-infinite="onInfinite"
   <!-- 这里添加你需要的内容 -->
 >
-</nut-pullrefresh-loadmore>
+</nut-scroll>
 ```
 ## 下拉刷新&&无限加载方法使用
 

+ 1 - 1
src/packages/scroll/scroll.vue

@@ -57,7 +57,7 @@ const widthAndHeightValidator = (v) => {
 };
 
 export default {
-  name: 'nut-pullrefresh-loadmore',
+  name: 'nut-scroll',
   components: {
     Spinner,
     Arrow,

+ 0 - 267
src/packages/scroller/demo.vue

@@ -1,267 +0,0 @@
-<template>
-  <div class="demo-list">
-    <nut-noticebar :closeMode="true" v-if="!isMobile"
-      >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大,建议在 Android 或 iOS 设备上体验。</nut-noticebar
-    >
-    <h4>横向滑动</h4>
-    <p>支持惯性和吸边回弹,支持滑动到底跳转链接。</p>
-    <p>
-      <nut-button type="light" shape="circle" size="small" @click="scrollToPosHor()">返回第一个</nut-button>
-    </p>
-    <div class="hor-panel">
-      <nut-scroller @jump="jump()" @scrollToCbk="scrollToCbkHor" :scrollTo="scrollToHor">
-        <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
-          <dl class="nut-scroller-item-info">
-            <dt>防水升级版 蓝 迷你小音</dt>
-            <dd>2018-02-25</dd>
-          </dl>
-        </div>
-        <slot slot="more">
-          <div class="nut-hor-jump-more">查看更多</div>
-        </slot>
-      </nut-scroller>
-    </div>
-    <h4>横向小于一屏</h4>
-    <div class="hor-panel">
-      <nut-scroller @jump="jump()">
-        <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData3" :key="index">
-          <dl class="nut-scroller-item-info">
-            <dt>防水升级版 蓝牙音箱 小音</dt>
-            <dd>2018-02-25</dd>
-          </dl>
-        </div>
-      </nut-scroller>
-    </div>
-    <h4>纵向滑动</h4>
-    <p>支持下拉刷新、上拉加载更多。</p>
-    <p>
-      <nut-button type="light" shape="circle" size="small" @click="scrollToPos()">返回列表顶部</nut-button>
-    </p>
-    <div class="vert-panel">
-      <nut-scroller
-        :is-un-more="isUnMore1"
-        :is-loading="isLoading1"
-        :type="'vertical'"
-        :propsTime="0"
-        :scrollTo="scrollTo"
-        @loadMore="loadMoreVert"
-        @pulldown="pulldown"
-        @scrollToCbk="scrollToCbk"
-        @scrollChange="scrollChange"
-      >
-        <div slot="list" class="nut-vert-list-panel">
-          <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
-            <dl class="nut-scroller-item-info">
-              <dt>{{ index }}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音</dt>
-              <dd>2018-02-25</dd>
-            </dl>
-          </div>
-        </div>
-      </nut-scroller>
-    </div>
-    <h4>纵向不满一屏</h4>
-    <p>支持下拉刷新、上拉加载更多。</p>
-    <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">
-            <dl class="nut-scroller-item-info">
-              <dt>{{ index }}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音</dt>
-              <dd>2018-02-25</dd>
-            </dl>
-          </div>
-        </div>
-      </nut-scroller>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      listData: new Array(20),
-      listData1: new Array(20),
-      listData2: [1, 2],
-      listData3: [1],
-      maxPages: 4,
-      isUnMore1: false,
-      isLoading1: false,
-      page1: 2,
-      maxPages2: 1,
-      isUnMore2: false,
-      isLoading2: false,
-      page2: 2,
-      timers: null,
-      scrollTo: 1,
-      scrollToHor: 1,
-    };
-  },
-
-  methods: {
-    jump() {
-      location.href = 'http://www.jd.com';
-    },
-
-    scrollToCbk() {
-      this.scrollTo = 1;
-    },
-
-    scrollToCbkHor() {
-      this.scrollToHor = 1;
-    },
-
-    scrollToPosHor() {
-      this.scrollToHor = 0;
-    },
-    scrollChange(event) {
-      console.log(event);
-    },
-    scrollToPos() {
-      this.scrollTo = 0;
-    },
-
-    loadMoreVert() {
-      this.isLoading1 = true;
-      if (this.page1 > this.maxPages) {
-        this.isUnMore1 = true;
-        this.isLoading1 = false;
-      } else {
-        clearTimeout(this.timers);
-        this.timer = setTimeout(() => {
-          this.isLoading1 = false;
-          this.isUnMore1 = false;
-          this.listData1 = new Array(20 * this.page1);
-          this.page1 = ++this.page1;
-        }, 300);
-      }
-    },
-
-    pulldown() {
-      this.isLoading1 = true;
-      clearTimeout(this.timers);
-      this.timer = setTimeout(() => {
-        this.isLoading1 = false;
-        this.isUnMore1 = false;
-        this.listData1 = new Array(20);
-        this.page1 = 2;
-      }, 3000);
-    },
-
-    loadMoreVert2() {
-      this.isLoading2 = true;
-      if (this.page2 > this.maxPages2) {
-        this.isUnMore2 = true;
-        this.isLoading2 = false;
-      } else {
-        clearTimeout(this.timers);
-        this.timer = setTimeout(() => {
-          this.isLoading2 = false;
-          this.isUnMore2 = false;
-          this.listData2 = new Array(20 * this.page2);
-          this.page2 = ++this.page1;
-        }, 300);
-      }
-    },
-
-    pulldown2() {
-      this.isLoading2 = true;
-      clearTimeout(this.timers);
-      this.timer = setTimeout(() => {
-        this.isLoading2 = false;
-        this.isUnMore2 = false;
-        this.listData2 = new Array(10);
-        this.page2 = 2;
-      }, 300);
-    },
-  },
-
-  destroyed() {
-    clearTimeout(this.timer);
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.hor-panel {
-  height: 80px;
-  background-color: #e0e0e0;
-  display: flex;
-}
-
-.nut-hor-list {
-  .nut-hor-list-item {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 180px;
-    height: 60px;
-    padding: 10px;
-    margin-left: 10px;
-    background-color: #fff;
-    color: #000;
-    line-height: 100px;
-  }
-}
-
-.nut-hor-jump-more {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  width: 20px;
-  padding: 0 5px;
-  margin-left: 10px;
-  font-size: 12px;
-  text-align: center;
-  color: $primary-color;
-  background-color: #fff;
-}
-
-.nut-scroller-item-img {
-  height: 58px;
-  width: 58px;
-  border-radius: 10px;
-  border: 1px solid #eee;
-  overflow: hidden;
-}
-
-dl,
-dt,
-dd {
-  margin: 0;
-}
-
-.nut-scroller-item-info {
-  flex: 1;
-  padding-left: 10px;
-  line-height: 20px;
-
-  dt {
-    font-size: 14px;
-  }
-
-  dd {
-    margin-left: 0;
-    font-size: 12px;
-  }
-}
-
-.vert-panel {
-  height: 400px;
-  padding: 10px;
-  background-color: #e1e1e1;
-}
-
-.nut-vert-list-panel {
-  .nut-vert-list-item {
-    display: flex;
-    height: 60px;
-    padding: 10px;
-    margin-bottom: 10px;
-    //background-color: mix($primary-color, #FFF, 90%);
-    background-color: #fff;
-    color: #000;
-  }
-}
-</style>

+ 0 - 187
src/packages/scroller/doc.md

@@ -1,187 +0,0 @@
-# Scroller 滚动
-
-局部滚动组件,支持惯性、吸边回弹。纵向可支持下拉刷新和上拉加载,横向可支持滚动末尾跳转。
-
-## 基本用法
-
-横向使用,支持惯性、吸边回弹,支持滚动末尾跳转。
-
-```html
-<nut-scroller @jump="jump()">
-    <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
-        <dl class="nut-scroller-item-info">
-            <dt>防水升级版 蓝 迷你小音</dt>
-            <dd>2018-02-25</dd>
-        </dl>
-    </div>
-    <slot slot="more"><div class="nut-hor-jump-more">查看更多</div></slot>
-</nut-scroller>
-```
-
-横向小于一屏
-```html
-<div class="hor-panel">
-    <nut-scroller @jump="jump()">
-        <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData3" :key="index">
-            <dl class="nut-scroller-item-info">
-                <dt>防水升级版 蓝牙音箱 小音</dt>
-                <dd>2018-02-25</dd>
-            </dl>
-        </div>
-        <slot slot="more" ><div class="nut-hor-jump-more">查看更多</div></slot>
-    </nut-scroller>
-</div>
-```
-纵向使用,支持下拉刷新和上拉加载更多。
-
-```html
-<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">
-            <dl class="nut-scroller-item-info">
-                <dt>防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音</dt>
-                <dd>2018-02-25</dd>
-            </dl>
-        </div>
-    </div>
-</nut-scroller>
-```
-
-纵向不满一屏
-
-```html
-<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">
-            <dl class="nut-scroller-item-info">
-                <dt>防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音</dt>
-                <dd>2018-02-25</dd>
-            </dl>
-        </div>
-    </div>
-</nut-scroller>
-```
-
-```javascript
-export default {
-    data() {
-        return {
-            listData: new Array(20),
-            listData1: new Array(20),
-            listData2: [1, 2],
-            listData3: [1],
-            maxPages: 4,
-            isUnMore1: false,
-            isLoading1: false,
-            page1: 2,
-            maxPages2: 1,
-            isUnMore2: false,
-            isLoading2: false,
-            page2: 2,
-            timers: null,
-        };
-    },
-
-    methods: {
-        jump() {
-            location.href = 'http://www.jd.com';
-        },
-
-        loadMoreVert() {
-            this.isLoading1 = true;
-            if (this.page1 > this.maxPages) {
-                this.isUnMore1 = true;
-                this.isLoading1 = false;
-            } else {
-                clearTimeout(this.timers);
-                this.timer = setTimeout(() => {
-                    this.isLoading1 = false;
-                    this.isUnMore1 = false;
-                    this.listData1 = new Array(20 * this.page1);
-                    this.page1 = ++this.page1;
-                }, 300);
-            }
-        },
-
-        pulldown() {
-            this.isLoading1 = true;
-            clearTimeout(this.timers);
-            this.timer = setTimeout(() => {
-                this.isLoading1 = false;
-                this.isUnMore1 = false;
-                this.listData1 = new Array(20);
-                this.page1 = 2;
-            }, 3000);
-        },
-
-
-        loadMoreVert2() {
-            this.isLoading2 = true;
-            if (this.page2 > this.maxPages2) {
-                this.isUnMore2 = true;
-                this.isLoading2 = false;
-            } else {
-                clearTimeout(this.timers);
-                this.timer = setTimeout(() => {
-                    this.isLoading2 = false;
-                     this.isUnMore2 = false;
-                    this.listData2 = new Array(20 * this.page2);
-                    this.page2 = ++this.page1;
-                }, 300);
-            }
-        },
-
-        pulldown2() {
-            this.isLoading2 = true;
-            clearTimeout(this.timers);
-            this.timer = setTimeout(() => {
-                this.isLoading2 = false;
-                this.isUnMore2 = false;
-                this.listData2 = new Array(10);
-                this.page2 = 2;
-            }, 300);
-        }
-    },
-    
-    destroyed() {
-        clearTimeout(this.timer);
-    }
-};
-```
-
-## Prop
-
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| type | 类型,'horizontal'横向或'vertical'纵向 | String | 'horizontal'
-| stretch | 拉伸范围 | Number | 100
-| isUnMore | 是否没有更多 | Boolean | false
-| isLoading | 是否正在加载 | Boolean | false
-| propsTime | type=vertical时,加载成功后pulldownTxt停留时间,单位为 ms | Number | 0
-| threshold | 距离底部多少开始加载 | Number | 100
-| pulldownTxt | 下拉展示文案 | String | '下拉刷新'
-| loadMoreTxt | 上拉展示文案 | String | '上拉加载'
-| unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了'
-| scrollTo | 滚动到指定位置,只能设置负数,需要配合scrollToCbk使用 | Number | 1
-
-## Event
-
-| 字段 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| pulldown | 下拉刷新回调 | -
-| loadMore | 上拉加载回调 | -
-| jump | 查看更多跳转回调 | -
-| scrollToCbk | 滚动到指定位置之后,scrollTo参数设置成默认值 | -
-| scrollChange | 实时监听滚动y轴坐标,type vertical时生效 | 滑动高度

+ 0 - 196
src/packages/scroller/horizontal-scroll.vue

@@ -1,196 +0,0 @@
-<template>
-  <div class="nut-hor-scroll" ref="wrapper">
-    <div class="nut-hor-list" ref="list">
-      <slot name="list"></slot>
-      <div class="nut-hor-control" v-if="$slots.more && isShowLoadMore">
-        <slot name="more"></slot>
-      </div>
-      <slot name="arrow" v-if="$slots.arrow"></slot>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'nut-hor-scroll',
-  props: {
-    stretch: {
-      type: Number,
-      default: 40,
-    },
-    scrollTo: {
-      type: Number,
-      default: 1,
-    },
-    listWidth: {
-      type: Number,
-      default: 0,
-    },
-  },
-  watch: {
-    scrollTo: function (val) {
-      if (typeof val === 'number' && !isNaN(val) && val <= 0) {
-        this.setTransform(val, null, 500);
-        this.$emit('scrollToCbk');
-      }
-    },
-  },
-  data() {
-    return {
-      touchParams: {
-        startX: 0,
-        endX: 0,
-        startY: 0,
-        endY: 0,
-        startTime: 0,
-        endTime: 0,
-      },
-      transformX: 0,
-      scrollDistance: 0,
-      timer: null,
-      isShowLoadMore: false,
-      isFirstShow: false,
-    };
-  },
-  methods: {
-    isShow() {
-      let wrapH = this.listWidth ? this.listWidth : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-      let listH = this.$refs.list.offsetWidth;
-      if (wrapH <= listH) {
-        this.isShowLoadMore = true;
-      } else {
-        this.isShowLoadMore = false;
-      }
-    },
-
-    setTransform(translateX = 0, type, time = 500, unit = 'px') {
-      this.scrollDistance = translateX;
-      translateX = translateX + unit;
-      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}, 0, 0)`;
-    },
-
-    setMove(move, type, time) {
-      let updateMove = move + this.transformX;
-      let w = this.listWidth ? this.listWidth : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-      let offsetWidth = this.$refs.list.offsetWidth;
-      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.stretch;
-        } 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.startY = changedTouches.pageY;
-      this.touchParams.startTime = event.timestamp || Date.now();
-      this.transformX = this.scrollDistance;
-    },
-
-    touchEvent(changedTouches, callback) {
-      this.touchParams.lastX = changedTouches.pageX;
-      this.touchParams.lastY = changedTouches.pageY;
-      let moveY = this.touchParams.lastY - this.touchParams.startY;
-      let move = this.touchParams.lastX - this.touchParams.startX;
-
-      if (!(Math.abs(move) > 20 && Math.abs(move) > Math.abs(moveY))) {
-        return false;
-      } else {
-        let w = this.listWidth ? this.listWidth : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-        let maxMove = -this.$refs.list.offsetWidth + w;
-        callback && callback(move, maxMove, moveY);
-      }
-    },
-
-    touchMove(event) {
-      //event.preventDefault();
-      let changedTouches = event.changedTouches[0];
-      this.touchParams.lastTime = event.timestamp || Date.now();
-      let moveTime = this.touchParams.lastTime - this.touchParams.startTime;
-      this.touchEvent(changedTouches, (move, maxMove, moveY) => {
-        event.preventDefault();
-        if (event.cancelable) {
-          event.preventDefault();
-        }
-        if (move > 0 && this.isFirstShow) {
-          this.isFirstShow = false;
-        }
-        this.setMove(move);
-      });
-    },
-
-    touchEnd(event) {
-      event.stopPropagation();
-      let changedTouches = event.changedTouches[0];
-      this.touchParams.lastTime = event.timestamp || Date.now();
-      let moveTime = this.touchParams.lastTime - this.touchParams.startTime;
-      this.touchEvent(changedTouches, (move, maxMove) => {
-        //if (moveTime <= 300) {
-        if (Math.abs(move) > 100) {
-          move = move * 1.5;
-        }
-
-        // 释放跳转之类
-        if (move < 0 && move + this.transformX < maxMove - 20 && this.isFirstShow) {
-          this.$emit('jump');
-        }
-
-        if (!this.isFirstShow && move < 0 && move + this.transformX < maxMove && this.$slots.more) {
-          this.isFirstShow = true;
-          //move = maxMove - this.transformX;
-        }
-
-        if (moveTime <= 300) {
-          moveTime = moveTime + 500;
-          this.setMove(move, 'end', moveTime);
-        } else {
-          this.setMove(move, 'end');
-        }
-      });
-    },
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.isShow();
-      // 监听
-      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>

+ 0 - 8
src/packages/scroller/index.js

@@ -1,8 +0,0 @@
-import Scroller from './scroller.vue';
-import './scroller.scss';
-
-Scroller.install = function(Vue) {
-  Vue.component(Scroller.name, Scroller);
-};
-
-export default Scroller;

File diff suppressed because it is too large
+ 0 - 83
src/packages/scroller/scroller.scss


+ 0 - 106
src/packages/scroller/scroller.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="nut-scroller">
-    <template v-if="type === 'vertical'">
-      <nut-vert-scroll
-        :stretch="stretch"
-        :is-un-more="isUnMore"
-        :is-loading="isLoading"
-        :threshold="threshold"
-        :pulldown-txt="pulldownTxt"
-        :load-more-txt="loadMoreTxt"
-        :unload-more-txt="unloadMoreTxt"
-        :props-time="propsTime"
-        :scroll-to="scrollTo"
-        @loadMore="loadMore"
-        @pulldown="pulldown"
-        @scrollToCbk="scrollToCbk"
-        @scrollChange="scrollChange"
-      >
-        <slot name="list" slot="list"></slot>
-      </nut-vert-scroll>
-    </template>
-    <template v-else-if="type === 'horizontal'">
-      <nut-hor-scroll :stretch="stretch" :scroll-to="scrollTo" @jump="jump" @scrollToCbk="scrollToCbk">
-        <slot name="list" slot="list"></slot>
-        <slot name="more" slot="more"></slot>
-        <slot name="arrow" slot="arrow"></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',
-    },
-    stretch: {
-      type: Number,
-      default: 100,
-    },
-    isUnMore: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    threshold: {
-      type: Number,
-      default: 100,
-    },
-    pulldownTxt: {
-      type: String,
-      default: '下拉刷新',
-    },
-    loadMoreTxt: {
-      type: String,
-      default: '上拉加载',
-    },
-    unloadMoreTxt: {
-      type: String,
-      default: '没有更多了',
-    },
-    propsTime: {
-      type: Number,
-      default: 0,
-    },
-    scrollTo: {
-      type: Number,
-      default: 1,
-    },
-  },
-  data() {
-    return {};
-  },
-  components: {
-    [nutVertScroll.name]: nutVertScroll,
-    [nutHorScroll.name]: nutHorScroll,
-  },
-  methods: {
-    loadMore() {
-      this.$emit('loadMore');
-    },
-
-    jump() {
-      this.$emit('jump');
-    },
-
-    pulldown() {
-      this.$emit('pulldown');
-    },
-
-    scrollToCbk() {
-      this.$emit('scrollToCbk');
-    },
-    scrollChange(event) {
-      this.$emit('scrollChange', event);
-    },
-  },
-};
-</script>

+ 0 - 242
src/packages/scroller/vertical-scroll.vue

@@ -1,242 +0,0 @@
-<template>
-  <div class="nut-vert-scroll" ref="wrapper">
-    <div class="nut-vert-list" ref="list" :style="{ 'min-height': listMinHeightStyle }">
-      <div class="nut-vert-pulldown" v-if="isFirstPull">
-        <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">
-        <template v-if="!isUnMore && isShowLoadMore">
-          <!-- <div class="nut-vert-load-txt" >{{loadMoreTxt}}</div> -->
-          <div class="nut-vert-load-status" v-if="isLoading">
-            <span class="nut-vert-loading"></span>
-            <span class="nut-vert-loading-txt">加载中...</span>
-          </div>
-        </template>
-        <template v-else-if="isUnMore">
-          <div class="nut-vert-unloadmore-txt">{{ unloadMoreTxt }}</div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'nut-vert-scroll',
-  props: {
-    stretch: {
-      type: Number,
-      default: 100,
-    },
-    isUnMore: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    pulldownTxt: {
-      type: String,
-      default: '下拉刷新',
-    },
-    loadMoreTxt: {
-      type: String,
-      default: '上拉加载',
-    },
-    unloadMoreTxt: {
-      type: String,
-      default: '没有更多了',
-    },
-    threshold: {
-      type: Number,
-      default: 100,
-    },
-    propsTime: {
-      type: Number,
-      default: 0,
-    },
-    scrollTo: {
-      type: Number,
-      default: 1,
-    },
-  },
-  watch: {
-    isLoading: function (status) {
-      if (!status && this.realMove === 0) {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-          this.setTransform(this.realMove, 'end', null);
-        }, this.propsTime);
-      }
-    },
-    isUnMore: function () {
-      this.isShow();
-    },
-    scrollTo: function (val) {
-      if (typeof val === 'number' && !isNaN(val) && val <= 0) {
-        this.setTransform(val, null, 500);
-        this.$emit('scrollToCbk');
-      }
-    },
-  },
-  data() {
-    return {
-      touchParams: {
-        startY: 0,
-        endY: 0,
-        startTime: 0,
-        endTime: 0,
-      },
-      translateY: 0,
-      scrollDistance: 0,
-      timer: null,
-      timerEmit: null,
-      realMove: 0,
-      isShowLoadMore: false,
-      listMinHeightStyle: 'auto',
-      isFirstPull: true,
-    };
-  },
-
-  methods: {
-    isShow() {
-      let wrapH = this.$refs.wrapper.offsetHeight;
-      let listH = this.$refs.list.offsetHeight;
-      if (wrapH < listH) {
-        this.isShowLoadMore = true;
-        this.listMinHeightStyle = 'auto';
-      } else {
-        this.isShowLoadMore = false;
-        this.isFirstPull = true;
-        this.listMinHeightStyle = `${wrapH}px`;
-      }
-    },
-
-    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;
-      this.$emit('scrollChange', 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) {
-          this.realMove = 0;
-          if ((!this.isShowLoadMore || this.isFirstPull) && !this.isLoading && updateMove > 20) {
-            updateMove = 50;
-            clearTimeout(this.timerEmit);
-            this.timerEmit = setTimeout(() => {
-              this.$emit('pulldown');
-            }, time / 2);
-          } else {
-            this.isFirstPull = true;
-            updateMove = 0;
-          }
-        } else if (updateMove < 0 && updateMove < maxMove + this.threshold) {
-          if (updateMove < maxMove) {
-            updateMove = maxMove;
-          }
-          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.stretch;
-        } 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) {
-      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;
-      if (move < 0 && this.isShowLoadMore && this.isFirstPull) {
-        this.isFirstPull = false;
-      }
-      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.isShow();
-      // 监听
-      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>

+ 1 - 3
types/nutui.d.ts

@@ -56,7 +56,7 @@ 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 declare class Scroll extends UIComponent {}
 export declare class CountDown extends UIComponent {}
 export declare class Uploader extends UIComponent {}
 export declare class TextInput extends UIComponent {}
@@ -67,7 +67,6 @@ export declare class Elevator extends UIComponent {}
 export declare class LeftSlip extends UIComponent {}
 export declare class TabSelect extends UIComponent {}
 export declare class Popup extends UIComponent {}
-
 export declare class LuckDraw extends UIComponent {}
 export declare class Video extends UIComponent {}
 export declare class Signature extends UIComponent {}
@@ -77,7 +76,6 @@ export declare class TimeLineItem extends UIComponent {}
 export declare class SideNavBar extends UIComponent {}
 export declare class SubSideNavBar extends UIComponent {}
 export declare class SideNavBarItem extends UIComponent {}
-export declare class Qart extends UIComponent {}
 export declare class Drag extends UIComponent {}
 export declare class Address extends UIComponent {}
 export declare class Field extends UIComponent {}