feat: Scroller组件新增滚动到指定位置

src/packages/calendar/__test__/calendar.spec.js

@@ -6,7 +6,7 @@ import Vue from 'vue';
 describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
-            defaultValue: '2020-01-12'
+            defaultValue: '2022-01-12'
         }
     });
 
@@ -19,7 +19,7 @@ describe('Calendar.vue', () => {
 
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年01月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2021年01月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('12');
         })
     });
@@ -27,7 +27,7 @@ describe('Calendar.vue', () => {
     it('选择日期', () => {
         wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day').at(10).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('8');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('6');
 
         })
     });
@@ -36,9 +36,9 @@ describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
             type: 'range',
-            defaultValue: ['2020-02-22', '2020-02-25'],
-            startDate: '2020-02-01',
-            endDate:'2020-04-11'
+            defaultValue: ['2022-02-22', '2022-02-25'],
+            startDate: '2022-02-01',
+            endDate:'2022-04-11'
         }
     });
 
@@ -55,7 +55,7 @@ describe('Calendar.vue', () => {
     });
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年02月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年02月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('22 开始');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('25 结束');
         })
@@ -65,8 +65,8 @@ describe('Calendar.vue', () => {
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(14).trigger('click');
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(16).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('15 开始');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('17 结束');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('13 开始');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('15 结束');
         })
     });
    

src/packages/scroller/demo.vue

@@ -6,8 +6,9 @@
         >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
         <h4>横向滑动</h4>
         <p>支持惯性和吸边回弹，支持滑动到底跳转链接。</p>
+        <p><nut-button type="light" shape="circle" small @click="scrollToPosHor()">返回第一个</nut-button></p>
         <div class="hor-panel">
-            <nut-scroller @jump="jump()">
+            <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>
@@ -26,19 +27,21 @@
                         <dd>2018-02-25</dd>
                     </dl>
                 </div>
-                <slot slot="more" ><div class="nut-hor-jump-more">查看更多</div></slot>
             </nut-scroller>
         </div>
         <h4>纵向滑动</h4>
         <p>支持下拉刷新、上拉加载更多。</p>
+        <p><nut-button type="light" shape="circle" 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"
             > 
                 <div slot="list" class="nut-vert-list-panel">
                     <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
@@ -90,6 +93,8 @@ export default {
             isLoading2: false,
             page2: 2,
             timers: null,
+            scrollTo: 1,
+            scrollToHor: 1
         };
     },
 
@@ -98,6 +103,23 @@ export default {
             location.href = 'http://www.jd.com';
         },
 
+        scrollToCbk() {
+            this.scrollTo = 1;
+        },
+
+        scrollToCbkHor() {
+            this.scrollToHor = 1;
+        },
+
+        scrollToPosHor() {
+            this.scrollToHor = 0;
+            
+        },
+
+        scrollToPos() {
+            this.scrollTo = 0;
+        },
+
         loadMoreVert() {
             this.isLoading1 = true;
             if (this.page1 > this.maxPages) {

src/packages/scroller/doc.md

@@ -174,6 +174,7 @@ export default {
 | pulldownTxt | 下拉展示文案 | String | '下拉刷新'
 | loadMoreTxt | 上拉展示文案 | String | '上拉加载'
 | unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了'
+| scrollTo | 滚动到指定位置，只能设置复数，需要配合scrollToCbk使用 | Number | 1
 
 ## Event
 
@@ -181,4 +182,5 @@ export default {
 |----- | ----- | ----- 
 | pulldown | 下拉刷新回调 | -
 | loadMore | 上拉加载回调 | -
-| jump | 查看更多跳转回调 | -
+| jump | 查看更多跳转回调 | -
+| scrollToCbk | 滚动到指定位置之后，scrollTo参数设置成默认值 | -

src/packages/scroller/horizontal-scroll.vue

@@ -16,6 +16,18 @@ export default {
         stretch: {
             type: Number,
             default: 40
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
+        }
+    },
+    watch: {
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {

src/packages/scroller/scroller.vue

@@ -10,15 +10,22 @@
                 :load-more-txt="loadMoreTxt"
                 :unload-more-txt="unloadMoreTxt"
                 :props-time="propsTime"
+                :scroll-to="scrollTo"
                 @loadMore="loadMore"
                 @pulldown="pulldown"
+                @scrollToCbk="scrollToCbk"
             >
                 <slot name="list"  slot="list"></slot>
 
             </nut-vert-scroll>
         </template>
         <template v-else-if="type === 'horizontal'">
-            <nut-hor-scroll :stretch="stretch" @jump="jump">
+            <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>
@@ -67,6 +74,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     data() {
@@ -87,6 +98,10 @@ export default {
 
         pulldown() {
             this.$emit('pulldown');
+        },
+
+        scrollToCbk() {
+            this.$emit('scrollToCbk');
         }
     }
 }

src/packages/scroller/vertical-scroll.vue

@@ -59,6 +59,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     watch: {
@@ -72,6 +76,12 @@ export default {
         },
         'isUnMore': function() {
             this.isShow();
+        },
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {