From 4c59fd25ea27d512a5e5da2abf5f941d715e82b7 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 20 Mar 2019 14:33:12 +0800 Subject: [PATCH 01/18] =?UTF-8?q?flex=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E5=8A=A8=E6=80=81=E6=94=B9=E5=8F=98nut-col?= =?UTF-8?q?=E7=9A=84:span=E7=9A=84=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/col/col.scss | 32 +++++++++----------------------- src/packages/col/col.vue | 23 +++++++++++++---------- src/packages/flex/demo.vue | 14 ++++++++++++-- 3 files changed, 34 insertions(+), 35 deletions(-) diff --git a/src/packages/col/col.scss b/src/packages/col/col.scss index bd1db9534f..dce97d8549 100644 --- a/src/packages/col/col.scss +++ b/src/packages/col/col.scss @@ -12,27 +12,13 @@ float: left; box-sizing: border-box; } -.nut-col-12{ - width: 50%; -} -.nut-col-8{ - width: 33.33333%; -} -.nut-col-6{ - width: 25%; -} -.nut-col-4{ - width: 16.66667%; -} -.nut-col-offset-12{ - margin-left: 50%; -} -.nut-col-offset-8{ - margin-left: 33.33333%; -} -.nut-col-offset-6{ - margin-left: 25%; -} -.nut-col-offset-4{ - margin-left: 16.66667%; + +@for $i from 1 through 24 { + .nut-col-offset-#{$i} { + margin-left: 100/24*$i*1%; + } + + .nut-col-#{$i}{ + width: 100/24*$i*1%; + } } \ No newline at end of file diff --git a/src/packages/col/col.vue b/src/packages/col/col.vue index c36a39b7d2..da55c92a62 100644 --- a/src/packages/col/col.vue +++ b/src/packages/col/col.vue @@ -18,18 +18,21 @@ export default { }, data() { return { - classObject:{ - 'nut-col-12':this.span == '12', - 'nut-col-8':this.span == '8', - 'nut-col-6':this.span == '6', - 'nut-col-4':this.span == '4', - 'nut-col-offset-12':this.offset == '12', - 'nut-col-offset-8':this.offset == '8', - 'nut-col-offset-6':this.offset == '6', - 'nut-col-offset-4':this.offset == '4' - } + classObject:{} }; }, + watch:{ + span:{ + handler(val){ + if(val){ + this.classObject = { + ['nut-col-'+val]:this.span == val, + } + } + }, + immediate: true + } + }, methods: { } } diff --git a/src/packages/flex/demo.vue b/src/packages/flex/demo.vue index c89c701734..984f29afe3 100644 --- a/src/packages/flex/demo.vue +++ b/src/packages/flex/demo.vue @@ -35,8 +35,8 @@
span:6
 - -
span:6
+ +
span:{{myValue}}
 @@ -304,6 +304,16 @@ From b87d2f2bca4f72a37d6909fc5e2136a5f1aa4381 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 21 Mar 2019 13:49:08 +0800 Subject: [PATCH 02/18] col --- src/packages/col/col.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/packages/col/col.vue b/src/packages/col/col.vue index da55c92a62..a74756fc87 100644 --- a/src/packages/col/col.vue +++ b/src/packages/col/col.vue @@ -25,9 +25,19 @@ export default { span:{ handler(val){ if(val){ - this.classObject = { + this.classObject = Object.assign(this.classObject,{ ['nut-col-'+val]:this.span == val, - } + }) + } + }, + immediate: true + }, + offset:{ + handler(val){ + if(val){ + this.classObject = Object.assign(this.classObject,{ + ['nut-col-offset-'+val]:this.offset == val, + }) } }, immediate: true From c0e40ac3dfc70bc326a91cb4993f822c16a06b75 Mon Sep 17 00:00:00 2001 From: lilinsen Date: Thu, 21 Mar 2019 15:44:28 +0800 Subject: [PATCH 03/18] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sites/doc/compents/hidden/hidden.vue | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/sites/doc/compents/hidden/hidden.vue b/sites/doc/compents/hidden/hidden.vue index 883cb7f0e7..adc5fa81d5 100644 --- a/sites/doc/compents/hidden/hidden.vue +++ b/sites/doc/compents/hidden/hidden.vue @@ -9,20 +9,19 @@ :class="{ show:isShow, hide:isHide - }" - :style="siteHeight" - style="transition: all .2s;"> + }" + >
+ L 20,5" fill="none" stroke="#000"> + L 20,5" fill="none" stroke="#000">
@@ -70,6 +69,9 @@ export default { } diff --git a/src/packages/stepper/doc.md b/src/packages/stepper/doc.md index e94f34e98f..d3b028c7ce 100644 --- a/src/packages/stepper/doc.md +++ b/src/packages/stepper/doc.md @@ -64,4 +64,14 @@ | step | 步长 | Number, String | 1 | readonly | 是否只读 | Boolean | false | transition | 是否需要过渡效果 | Boolean | true -| simple | 是否显示简单版 | Boolean | true \ No newline at end of file +| simple | 是否显示简单版 | Boolean | true + +## Event + +| 字段 | 说明 | 回调参数 +|----- | ----- | ----- +| add | 点击加时触发事件 ｜ value +| reduce | 点击减时触发事件 ｜ value +| change | 值改变时触发事件 ｜ value +| blur | 输入框失去焦点时触发事件 | value +| focus | 输入框获取焦点时触发事件 | value diff --git a/src/packages/stepper/stepper.vue b/src/packages/stepper/stepper.vue index 7d5c800ecc..5f71af7aea 100644 --- a/src/packages/stepper/stepper.vue +++ b/src/packages/stepper/stepper.vue @@ -126,9 +126,10 @@ export default { this.minNum = ''; // this.num = ''; this.focusing = true; + this.$emit('focus', this.num); }, blur(e) { - if(this.readonly) return; + if(this.readonly) return this.$emit('focus', this.num); let v = e.target.value; this.minNum = this.min; this.focusing = false; @@ -139,6 +140,7 @@ export default { }else{ this.num = this.tempNum; } + this.$emit('focus', this.num); }, checknum(e) { let v = e.target.value; From cc849dee8818913c37c586a7901692a04ccc4c18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=88=90=E6=9E=97?= Date: Fri, 22 Mar 2019 18:41:13 +0800 Subject: [PATCH 06/18] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=97=A0=E9=99=90?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=92=8C=E6=BB=9A=E5=8A=A8=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config.json | 12 +- src/packages/infiniteloading/demo.vue | 59 ++++++ src/packages/infiniteloading/doc.md | 58 ++++++ src/packages/infiniteloading/index.js | 8 + .../infiniteloading/infiniteloading.scss | 49 +++++ .../infiniteloading/infiniteloading.vue | 144 ++++++++++++++ src/packages/scroller/demo.vue | 134 ++++--------- src/packages/scroller/doc.md | 182 ++++++++++++++++++ src/packages/scroller/horizontal-scroll.vue | 143 ++++++-------- src/packages/scroller/scroller.scss | 19 +- src/packages/scroller/scroller.vue | 43 +++-- src/packages/scroller/vertical-scroll.vue | 88 +++++---- 12 files changed, 688 insertions(+), 251 deletions(-) create mode 100644 src/packages/infiniteloading/demo.vue create mode 100644 src/packages/infiniteloading/doc.md create mode 100644 src/packages/infiniteloading/index.js create mode 100644 src/packages/infiniteloading/infiniteloading.scss create mode 100644 src/packages/infiniteloading/infiniteloading.vue diff --git a/src/config.json b/src/config.json index 7275df36b6..abe98fd77b 100644 --- a/src/config.json +++ b/src/config.json @@ -398,7 +398,7 @@ "desc": "滚动组件", "type": "component", "sort": "1", - "showDemo": false, + "showDemo": true, "author": "iris" }, { @@ -420,6 +420,16 @@ "sort": "0", "showDemo": true, "author": "famanoder" + }, + { + "version": "1.0.0", + "name": "InfiniteLoading", + "chnName": "无限加载", + "desc": "无限加载", + "type": "component", + "sort": "1", + "showDemo": true, + "author": "iris" } ] } \ No newline at end of file diff --git a/src/packages/infiniteloading/demo.vue b/src/packages/infiniteloading/demo.vue new file mode 100644 index 0000000000..f77242b63c --- /dev/null +++ b/src/packages/infiniteloading/demo.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/packages/infiniteloading/doc.md b/src/packages/infiniteloading/doc.md new file mode 100644 index 0000000000..b6bc05ab00 --- /dev/null +++ b/src/packages/infiniteloading/doc.md @@ -0,0 +1,58 @@ +# InfiniteLoading 无限加载 + +## 基本用法 + +```html + +
    +
  • 我是测试数据{{index + 1}}
    • +
+ +``` +```javascript +export default { + data() { + return { + data: new Array(30), + page: 2, + num: 30, + isHasMore: true, + isLoading: false, + isErr: false, + timer: null + }; + }, + methods: { + onInfinite () { + this.isLoading = true; + this.timer = setTimeout(() => { + if (this.page <= 5) { + this.data = new Array(this.num * this.page); + this.page = this.page + 1; + } else { + this.isHasMore = false; + } + this.isLoading = false; + }, 100); + } + }, + destroyed() { + clearTimeout(this.timer); + } +}; +``` + +## Prop + +| 字段 | 说明 | 类型 | 默认值 +|----- | ----- | ----- | ----- +| hasMore | 是否还有更多数据 | Boolean | true +| isLoading | 是否加载中 | Boolean | false +| threshold | 距离底部多远加载 | Number | 200 +| isShowMod | 是否展示懒加载模块内容，一般适用于选项卡切换 | Boolean | false + +## Event + +| 字段 | 说明 | 回调参数 +|----- | ----- | ----- +| loadmore | 继续加载的回调函数 | - diff --git a/src/packages/infiniteloading/index.js b/src/packages/infiniteloading/index.js new file mode 100644 index 0000000000..bbbe6c12ea --- /dev/null +++ b/src/packages/infiniteloading/index.js @@ -0,0 +1,8 @@ +import InfiniteLoading from './infiniteloading.vue'; +import './infiniteloading.scss'; + +InfiniteLoading.install = function(Vue) { + Vue.component(InfiniteLoading.name, InfiniteLoading); +}; + +export default InfiniteLoading \ No newline at end of file diff --git a/src/packages/infiniteloading/infiniteloading.scss b/src/packages/infiniteloading/infiniteloading.scss new file mode 100644 index 0000000000..955550001f --- /dev/null +++ b/src/packages/infiniteloading/infiniteloading.scss @@ -0,0 +1,49 @@ +.nut-infiniteloading{ + .bottom-tips { + width: 100%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + color: #e6e6e6; + font-size: 12px; + .loading-txt { + padding-left: 5px; + } + .loading-hint { + display: inline-block; + height: 12px; + width: 12px; + 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% 100%; + animation: rotate 1s infinite; + } + @keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + .tips-txt { + position: relative; + &:after, + &:before { + content: ""; + height: 1px; + width: 20px; + background-color: #e6e6e6; + position: absolute; + top: 50%; + margin-top: -0.5px; + } + &:before { + left: -25px; + } + &:after { + right: -25px; + } + } + } +} \ No newline at end of file diff --git a/src/packages/infiniteloading/infiniteloading.vue b/src/packages/infiniteloading/infiniteloading.vue new file mode 100644 index 0000000000..a8453ee99b --- /dev/null +++ b/src/packages/infiniteloading/infiniteloading.vue @@ -0,0 +1,144 @@ + + diff --git a/src/packages/scroller/demo.vue b/src/packages/scroller/demo.vue index dc58fa6cf3..fcbe6f86c4 100644 --- a/src/packages/scroller/demo.vue +++ b/src/packages/scroller/demo.vue @@ -6,44 +6,29 @@ >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。

横向用法

- +
-
- -
防水升级版 蓝 迷你小音
2018-02-25
-
释放查看更多
 +
查看更多

横向小于一屏

- +
-
- -
防水升级版 蓝牙音箱 小音
2018-02-25
-
释放查看更多
 +
查看更多
-

竖向用法

+

纵向用法

-
- -
-
防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
+
{{index}}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
2018-02-25
-

竖向不满一屏用法

+

纵向不满一屏用法

-
防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
+
{{index}}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
2018-02-25
@@ -94,15 +76,11 @@ 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], + listData: new Array(20), + listData1: new Array(20), listData2: [1, 2], listData3: [1], - isUnMore: false, - isLoading: false, - maxPages: 3, - page: 2, - timers: null, + maxPages: 4, isUnMore1: false, isLoading1: false, page1: 2, @@ -110,47 +88,12 @@ export default { isUnMore2: false, isLoading2: false, page2: 2, - isUnMore3: false, - isLoading3: false, - page3: 2 + timers: null, }; }, methods: { - loadMoreHor() { - this.isLoading = true; - if (this.page > this.maxPages) { - this.isUnMore = true; - this.isLoading = false; - } else { - clearTimeout(this.timers); - 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); - } - }, - - loadMoreHor3() { - this.isLoading3 = true; - if (this.page3 > this.maxPages2) { - this.isUnMor3 = true; - this.isLoading3 = false; - } else { - clearTimeout(this.timers); - this.timer = setTimeout(() => { - this.page3 = ++this.page3; - this.listData3 = [...this.listData3, ...[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]]; - console.log(this.listData3); - this.isLoading3 = false; - }, 300); - } - }, - jump() { - console.log('跳转'); location.href = 'http://www.jd.com'; }, @@ -162,12 +105,11 @@ export default { } else { clearTimeout(this.timers); this.timer = setTimeout(() => { - this.page1 = ++this.page1; this.isLoading1 = false; - this.listData1 = [...this.listData1, ...[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]]; - console.log(this.listData1); - - }, 2000); + this.isUnMore1 = false; + this.listData1 = new Array(20 * this.page1); + this.page1 = ++this.page1; + }, 300); } }, @@ -175,12 +117,11 @@ export default { this.isLoading1 = true; clearTimeout(this.timers); this.timer = setTimeout(() => { - this.page1 = 2; this.isLoading1 = false; this.isUnMore1 = false; - this.listData1 = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; - - }, 2000); + this.listData1 = new Array(20); + this.page1 = 2; + }, 300); }, @@ -192,11 +133,11 @@ export default { } else { clearTimeout(this.timers); this.timer = setTimeout(() => { - this.page2 = ++this.page1; this.isLoading2 = false; - this.listData2 = [...this.listData1, ...[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]]; - console.log(this.listData1); - }, 2000); + this.isUnMore2 = false; + this.listData2 = new Array(20 * this.page2); + this.page2 = ++this.page1; + }, 300); } }, @@ -204,11 +145,11 @@ export default { this.isLoading2 = true; clearTimeout(this.timers); this.timer = setTimeout(() => { - this.page2 = 2; this.isLoading2 = false; this.isUnMore2 = false; - this.listData2 = [11, 12, 13, 14, 15, 16]; - }, 2000); + this.listData2 = new Array(10); + this.page2 = 2; + }, 300); } }, @@ -221,7 +162,8 @@ export default { + + + \ No newline at end of file diff --git a/src/packages/scroller/doc.md b/src/packages/scroller/doc.md index e69de29bb2..3f796b1818 100644 --- a/src/packages/scroller/doc.md +++ b/src/packages/scroller/doc.md @@ -0,0 +1,182 @@ +# Scroller 滚动 + +## 纵向下拉刷新上拉加载，横向滚动末尾跳转 +## 基本用法 + +横向用法 + +```html + +
+
+
防水升级版 蓝 迷你小音
+
2018-02-25
+
+
+
查看更多
 + +``` + +横向小于一屏 +```html +
+ +
+
+
防水升级版 蓝牙音箱 小音
+
2018-02-25
+
+
+
查看更多
 + +
+``` +纵向用法 + +```html + +
+
+
+
{{index}}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
+
2018-02-25
+
+
+
+ +``` + +纵向不满一屏用法 + +```html + +
+
+
+
{{index}}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
+
2018-02-25
+
+
+
+ +``` + +```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; + }, 300); + }, + + + 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 +| threshold | 距离底部多少开始加载 | Number | 100 +| pulldownTxt | 下拉展示文案 | String | '下拉刷新' +| loadMoreTxt | 上拉展示文案 | String | '上拉加载' +| unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了' + +## Event + +| 字段 | 说明 | 回调参数 +|----- | ----- | ----- +| pulldown | 下拉刷新回调 | - +| loadMore | 上拉加载回调 | - +| jump | 查看更多跳转回调 | - \ No newline at end of file diff --git a/src/packages/scroller/horizontal-scroll.vue b/src/packages/scroller/horizontal-scroll.vue index 4a9439edca..2a565e933e 100644 --- a/src/packages/scroller/horizontal-scroll.vue +++ b/src/packages/scroller/horizontal-scroll.vue @@ -2,9 +2,10 @@
-
+
+
@@ -12,26 +13,9 @@ 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 + default: 40 } }, data() { @@ -39,68 +23,45 @@ export default { touchParams: { startX: 0, endX: 0, + startY: 0, + endY: 0, startTime: 0, endTime: 0 }, transformX: 0, scrollDistance: 0, timer: null, - isShowLoadMore: false + isShowLoadMore: false, + isFirstShow: false } }, methods: { - requestAnimationFrame(){ - return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - function(callback){ - window.setTimeout(callback, 1000 / 60); - } - }, - - loazyLoadImg() { - let imgLazyLoadEl; - this.requestAnimationFrame()(() => { - imgLazyLoadEl = this.$refs.list.querySelectorAll('img'); - imgLazyLoadEl.forEach((item, index) => { - if (!item.getAttribute('src')) { - let src = item.getAttribute('data-src'); - let img = new Image(); - img.src = src; - console.log(src); - img.onload = ()=>{ - item.src = src; - } - img.onerror = ()=>{ - item.classList.add('load-err'); - } - } - }); - }) - }, - isShow() { let wrapH = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - let listH = this.listData.length * this.lineSpacing; + let listH = this.$refs.list.offsetWidth; if (wrapH <= listH) { this.isShowLoadMore = true; } else { this.isShowLoadMore = false; } }, - setTransform(translateX = 0, type, time = 500) { + + 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}px, 0, 0)`; - this.scrollDistance = translateX; + this.$refs.list.style.webkitTransform = `translate3d(${translateX}, 0, 0)`; + }, 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; + let offsetWidth = this.$refs.list.offsetWidth; if (type === 'end') { if (updateMove > 0) { updateMove = 0; @@ -115,7 +76,7 @@ export default { } else { let maxMove = -offsetWidth + w; if (updateMove > 0 && updateMove > this.stretch) { - updateMove = this.stretc; + updateMove = this.stretch; } else if (updateMove < maxMove - this.stretch) { if (maxMove <= 0) { updateMove = maxMove - this.stretch; @@ -132,59 +93,71 @@ export default { 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; }, - touchMove(event) { - - let changedTouches = event.changedTouches[0]; + touchEvent(changedTouches, callback) { this.touchParams.lastX = changedTouches.pageX; - this.touchParams.lastTime = event.timestamp || Date.now(); + this.touchParams.lastY = changedTouches.pageY; + let moveY = this.touchParams.lastY - this.touchParams.startY; let move = this.touchParams.lastX - this.touchParams.startX; - this.setMove(move); + if (!(Math.abs(move) > 20 && Math.abs(move) > Math.abs(moveY))) { + return false; + } else { + let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + let maxMove = -this.$refs.list.offsetWidth + w; + callback && callback(move, maxMove, moveY); + } }, - touchEnd(event) { + touchMove(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; + this.touchEvent(changedTouches, (move, maxMove, moveY) => { + if (move > 0 && this.isFirstShow) { + this.isFirstShow = false; + } + this.setMove(move); + }); + }, + touchEnd(event) { + let changedTouches = event.changedTouches[0]; + this.touchParams.lastTime = event.timestamp || Date.now(); 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; + this.touchEvent(changedTouches, (move, maxMove) => { + //if (moveTime <= 300) { + move = move * 2; + //} - // 释放跳转之类 - 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 (move < 0 && (move + this.transformX) < maxMove - 20 && this.isFirstShow) { + this.$emit('jump'); + } - if (moveTime <= 300) { - move = move * 2; - if (move < 0 && move + this.transformX < maxMove) { - move = maxMove - this.transformX; + if (!this.isFirstShow && move < 0 && move + this.transformX < maxMove && this.$slots.more) { + this.isFirstShow = true; + //move = maxMove - this.transformX; } - moveTime = moveTime + 500; - this.setMove(move, 'end', moveTime); - } else { - this.setMove(move, 'end'); - } + + if (moveTime <= 300) { + moveTime = moveTime + 500; + this.setMove(move, 'end', moveTime); + } else { + this.setMove(move, 'end'); + } + }); } }, mounted() { this.$nextTick(() => { this.isShow(); - // this.loazyLoadImg(); // 监听 this.$el.addEventListener('touchstart', this.touchStart); this.$el.addEventListener('touchmove', this.touchMove); diff --git a/src/packages/scroller/scroller.scss b/src/packages/scroller/scroller.scss index cf5c23cc83..6e14f1a5f3 100644 --- a/src/packages/scroller/scroller.scss +++ b/src/packages/scroller/scroller.scss @@ -1,28 +1,13 @@ @import "../../styles/animation/rotate"; - .nut-scroller{ display: flex; height: 100%; - img{ - display: block; - height: 100%; - width: 100%; - background-image: url(../../assets/img/img-loading.png); - } - img, .load-err{ - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: 50%; - } - .load-err{ - background-image: url(../../assets/img/img-error.png); - } } // 横向滚动 .nut-hor-scroll{ height: 100%; width: 100%; - overflow: hidden; + // overflow: hidden; .nut-hor-list{ height: 100%; display: flex; @@ -53,7 +38,7 @@ text-align: center; line-height: 50px; font-size: 12px; - color: $text-color; + color: #999; .nut-vert-pulldown-status, .nut-vert-loadmore-status{ height: 50px; } diff --git a/src/packages/scroller/scroller.vue b/src/packages/scroller/scroller.vue index b127aadd80..4c1e3d05a2 100644 --- a/src/packages/scroller/scroller.vue +++ b/src/packages/scroller/scroller.vue @@ -5,23 +5,22 @@ :stretch="stretch" :is-un-more="isUnMore" :is-loading="isLoading" + :threshold="threshold" + :pulldown-txt="pulldownTxt" + :load-more-txt="loadMoreTxt" + :unload-more-txt="unloadMoreTxt" @loadMore="loadMore" @pulldown="pulldown" > +
@@ -34,19 +33,11 @@ export default { props: { type: { type: String, - default: 'horizontal' // horizontal vertical - }, - listData: { - type: Array, - default: () => [] - }, - lineSpacing: { - type: Number, - default: 210 + default: 'horizontal' }, stretch: { type: Number, - default: 200 + default: 100 }, isUnMore: { type: Boolean, @@ -55,6 +46,22 @@ export default { isLoading: { type: Boolean, default: false + }, + threshold: { + type: Number, + default: 100 + }, + pulldownTxt: { + type: String, + default: '下拉刷新' + }, + loadMoreTxt: { + type: String, + default: '上拉加载' + }, + unloadMoreTxt: { + type: String, + default: '没有更多了' } }, data() { diff --git a/src/packages/scroller/vertical-scroll.vue b/src/packages/scroller/vertical-scroll.vue index 40ce9b3ad2..94a3406a9e 100644 --- a/src/packages/scroller/vertical-scroll.vue +++ b/src/packages/scroller/vertical-scroll.vue @@ -1,7 +1,7 @@ @@ -41,6 +41,16 @@ export default { }; }, methods: { + showCode(){ + this.$dialog({ + type:"image", + link:"", + imgSrc:"https://img14.360buyimg.com/imagetools/s350x350_jfs/t1/23439/7/11643/155926/5c90d554E7f03c831/bd45cd0ee2daa2fa.jpg.dpg", + onClickImageLink(){ + return false; //返回false可阻止默认的链接跳转行为 + } + }); + }, toggleFold(idx) { this.foldStatus.splice(idx, 1, !this.foldStatus[idx]); sessionStorage.setItem("foldStatus", JSON.stringify(this.foldStatus)); diff --git a/sites/doc/asset/css/common.scss b/sites/doc/asset/css/common.scss index bccf1a04fd..8469a6abeb 100644 --- a/sites/doc/asset/css/common.scss +++ b/sites/doc/asset/css/common.scss @@ -136,7 +136,7 @@ pre { position: relative; max-width: 100%; overflow: auto; - margin .code-wrapper { + .code-wrapper { width: 100%; overflow: auto; } diff --git a/sites/doc/asset/js/bookmark.js b/sites/doc/asset/js/bookmark.js index dccf76078c..f5e0b7743f 100644 --- a/sites/doc/asset/js/bookmark.js +++ b/sites/doc/asset/js/bookmark.js @@ -10,7 +10,6 @@ import root from '../root.js'; let id = res.target.id; let index =id.replace(/head/,''); let li = document.querySelector('.level'+index); - console.log(li,index) if(li){ } diff --git a/sites/doc/info.vue b/sites/doc/info.vue index 5b7d6dff5a..e02cff3405 100644 --- a/sites/doc/info.vue +++ b/sites/doc/info.vue @@ -228,6 +228,7 @@ dd { } } .l-c-i { + cursor: pointer; position: relative; span { padding: 0 0 0 35px; diff --git a/src/config.json b/src/config.json index abe98fd77b..3a42b6e0fc 100644 --- a/src/config.json +++ b/src/config.json @@ -397,7 +397,8 @@ "chnName": "滚动", "desc": "滚动组件", "type": "component", - "sort": "1", + "sort": "0", + "star": 5, "showDemo": true, "author": "iris" }, @@ -427,7 +428,8 @@ "chnName": "无限加载", "desc": "无限加载", "type": "component", - "sort": "1", + "sort": "0", + "star": 4, "showDemo": true, "author": "iris" } diff --git a/src/packages/infiniteloading/doc.md b/src/packages/infiniteloading/doc.md index c2c3c3eafd..79b359bd12 100644 --- a/src/packages/infiniteloading/doc.md +++ b/src/packages/infiniteloading/doc.md @@ -4,9 +4,19 @@ ## 基本用法 ```html - +
    -
  • 我是测试数据{{index + 1}}
    • +
  • 我是测试数据{{index + 1}}
 ``` diff --git a/src/packages/scroller/doc.md b/src/packages/scroller/doc.md index bb8e348b97..0f3f1db357 100644 --- a/src/packages/scroller/doc.md +++ b/src/packages/scroller/doc.md @@ -45,7 +45,7 @@
-
{{index}}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
+
防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
2018-02-25
@@ -66,7 +66,7 @@
-
{{index}}防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
+
防水升级版 蓝牙音箱 低音炮 IPX7设计 户外便携音响 迷你小音
2018-02-25
diff --git a/src/packages/swiper/doc.md b/src/packages/swiper/doc.md index 81eaafa022..00ceb95770 100644 --- a/src/packages/swiper/doc.md +++ b/src/packages/swiper/doc.md @@ -170,7 +170,7 @@ | next | 去下一页 | - | prev | 去上一页 | - | setPage | 设置当前显示第几页 | number -| updateEvent | 异步数据渲染slide，都需要重新调用方法，绑定事件，如【横向无缝滑动】this.$ref.demo1.update(1)。也提供设置初始页面 | number +| updateEvent | 异步数据渲染slide，都需要重新调用方法，绑定事件，如【横向无缝滑动】this.$refs.demo1.update(1)。也提供设置初始页面 | number ## Events | 字段 | 说明 | 回调参数 From 3790e6fb6299f46cade8f980b6c891f745f74b0b Mon Sep 17 00:00:00 2001 From: Frans Date: Fri, 29 Mar 2019 14:50:26 +0800 Subject: [PATCH 18/18] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0CHANGELOG.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 13 +++++++++++++ package.json | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d209a81ba3..2557a99f8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,16 @@ +## 2.0.9 + +`2019-3-29` + +* :sparkles: feat: 新增局部滚动组件`Scroller` +* :sparkles: feat: 新增无限加载组件`InfiniteLoading` +* :sparkles: upd: 吐司组件`Toast`支持配置遮罩层，loading类型默认开启 +* :sparkles: upd: `flex`组件允许动态改变nut-col的:span的值 +* :bug: fix: 修复`RadioGroup`组件按需加载css报错的问题（感谢@451761830反馈） +* :bug: fix: 修复引用scss报错的问题 +* :bug: fix: 修复`Imagepicker`组件multiple属性逻辑错误问题（感谢@liuyanqing反馈） +* :zap: doc: 文档内容完善 + ## 2.0.8 `2019-3-19` diff --git a/package.json b/package.json index 29f17ad570..c418bb295a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nutui/nutui", - "version": "2.0.8", + "version": "2.0.9", "description": "一套轻量级移动端Vue组件库", "typings": "dist/types/index.d.ts", "main": "dist/nutui.js",