feat: 地址组件新增功能 #2101 (#2113)

* feat: tour更新

* feat: 文档修改

* feat: 插槽修改

* feat: noticebar发布

* feat: 文档更新

* fix: ellipsis修改

* fix: 修改 ellipsis

* feat: tour修改

* fix: 地址组件问题修改

* fix: imagepreview修改

* feat: 新增4.0介绍

* fix: 公告栏修改插槽使用不更新问题

* fix: 公告栏组件 demo 修改

* fix: 地址组件新增功能

src/packages/__VUE/address/index.scss

@@ -132,7 +132,7 @@
       .nut-address__detail-list {
         padding-top: 15px;
         height: 270px;
-        overflow-y: auto;
+        // overflow-y: auto;
         box-sizing: border-box;
         padding: 0;
         .nut-address__detail-item {

src/packages/__VUE/address/index.taro.vue

@@ -49,20 +49,22 @@
         </view>
 
         <view class="nut-address__detail" v-if="privateType == 'custom'">
-          <ul class="nut-address__detail-list">
-            <li
-              v-for="(item, index) in regionList"
-              :key="index"
-              :class="['nut-address__detail-item', selectedRegion[tabIndex]?.id == item.id ? 'active' : '']"
-              @click="nextAreaList(item)"
-            >
-              <div>
-                <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
-                  <Check class="nut-address-select-icon" width="13px"></Check> </slot
-                >{{ item.name }}
+          <div class="nut-address__detail-list">
+            <NutScrollView :scroll-y="true" :style="{ height: '100%' }" :scroll-top="scrollTop" @scroll="scrollChange">
+              <div
+                v-for="(item, index) in regionList"
+                :key="index"
+                :class="['nut-address__detail-item', selectedRegion[tabIndex]?.id == item.id ? 'active' : '']"
+                @click="nextAreaList(item)"
+              >
+                <div>
+                  <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
+                    <Check class="nut-address-select-icon" width="13px"></Check> </slot
+                  >{{ item.name }}
+                </div>
               </div>
-            </li>
-          </ul>
+            </NutScrollView>
+          </div>
         </view>
 
         <view class="nut-address__elevator-group" v-else>
@@ -124,6 +126,7 @@ import { reactive, ref, toRefs, watch, computed, PropType } from 'vue';
 import { popupProps } from '../popup/props';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { createComponent } from '@/packages/utils/create';
+import NutScrollView from '../scrollView/index.taro.vue';
 import Popup from '../popup/index.taro.vue';
 import Elevator from '../elevator/index.taro.vue';
 const { create, componentName, translate } = createComponent('address');
@@ -137,7 +140,8 @@ export default create({
     Location2,
     Check,
     Close,
-    Left
+    Left,
+    NutScrollView
   },
   inheritAttrs: false,
   props: {
@@ -192,7 +196,7 @@ export default create({
     },
     height: {
       type: [String, Number],
-      default: '200px'
+      default: '200'
     },
     columnsPlaceholder: {
       type: [String, Array],
@@ -218,7 +222,10 @@ export default create({
     const showPopup = ref(props.visible);
     const privateType = ref(props.type);
     const tabIndex = ref(0);
+    const prevTabIndex = ref(0);
     const tabName = ref(['province', 'city', 'country', 'town']);
+    const scrollDis = ref([0, 0, 0, 0]);
+    const scrollTop = ref(0);
 
     const regionList = computed(() => {
       switch (tabIndex.value) {
@@ -301,6 +308,7 @@ export default create({
           }
           selectedRegion.value[index] = arr.filter((item: RegionData) => item.id == defaultValue[index])[0];
         }
+        scrollTo();
       }
     };
 
@@ -328,7 +336,7 @@ export default create({
     // 切换下一级列表
     const nextAreaList = (item: RegionData) => {
       const tab = tabIndex.value;
-
+      prevTabIndex.value = tabIndex.value;
       const callBackParams: {
         next?: string;
         value?: RegionData;
@@ -349,6 +357,8 @@ export default create({
         callBackParams.value = item;
 
         emit('change', callBackParams);
+
+        scrollTo();
       } else {
         handClose();
         emit('update:modelValue');
@@ -356,11 +366,24 @@ export default create({
     };
     //切换地区Tab
     const changeRegionTab = (item: RegionData, index: number) => {
+      prevTabIndex.value = tabIndex.value;
       if (getTabName(item, index)) {
         tabIndex.value = index;
+        scrollTo();
       }
     };
 
+    const scrollChange = (e: any) => {
+      scrollDis.value[tabIndex.value] = e.detail.scrollTop;
+    };
+
+    const scrollTo = () => {
+      setTimeout(() => {
+        console.log(scrollDis.value, tabIndex.value);
+        scrollTop.value = scrollDis.value[tabIndex.value];
+      });
+    };
+
     // 选择现有地址
     const selectedExist = (item: existRegionData) => {
       const copyExistAdd = props.existAddress;
@@ -383,6 +406,7 @@ export default create({
     const initAddress = () => {
       selectedRegion.value = [];
       tabIndex.value = 0;
+      scrollTo();
     };
 
     // 关闭
@@ -475,7 +499,9 @@ export default create({
       ...toRefs(props),
       ...toRefs(tabItemRef),
       translate,
-      transformData
+      transformData,
+      scrollTop,
+      scrollChange
     };
   }
 });

src/packages/__VUE/address/index.vue

@@ -51,7 +51,7 @@
         </view>
 
         <view class="nut-address__detail" v-if="privateType == 'custom'">
-          <ul class="nut-address__detail-list">
+          <ul class="nut-address__detail-list" ref="scrollDom">
             <li
               v-for="(item, index) in regionList"
               :key="index"
@@ -202,7 +202,10 @@ export default create({
     const showPopup = ref(props.visible);
     const privateType = ref(props.type);
     const tabIndex = ref(0);
+    const prevTabIndex = ref(0);
     const tabName = ref(['province', 'city', 'country', 'town']);
+    const scrollDom = ref<null | HTMLElement>(null);
+    const scrollDis = ref([0, 0, 0, 0]);
 
     const regionList = computed(() => {
       switch (tabIndex.value) {
@@ -297,6 +300,8 @@ export default create({
     };
 
     const lineAnimation = () => {
+      scrollTo();
+
       nextTick(() => {
         const name = tabRegion.value && tabRegion.value.getElementsByClassName('active')[0];
         if (name) {
@@ -308,7 +313,7 @@ export default create({
 
     const nextAreaList = (item: RegionData) => {
       const tab = tabIndex.value;
-
+      prevTabIndex.value = tabIndex.value;
       const callBackParams: {
         next?: string;
         value?: RegionData;
@@ -338,12 +343,28 @@ export default create({
     };
 
     const changeRegionTab = (item: RegionData, index: number) => {
+      prevTabIndex.value = tabIndex.value;
       if (getTabName(item, index)) {
         tabIndex.value = index;
         lineAnimation();
       }
     };
 
+    const scrollTo = () => {
+      const dom = scrollDom.value;
+      const prev = prevTabIndex.value;
+      const cur = scrollDis.value[tabIndex.value];
+
+      dom?.scrollTop && (scrollDis.value[prev] = dom?.scrollTop);
+
+      nextTick(() => {
+        dom?.scrollTo({
+          top: cur,
+          behavior: 'auto'
+        });
+      });
+    };
+
     const selectedExist = (item: existRegionData) => {
       const copyExistAdd = props.existAddress;
       let prevExistAdd = {};
@@ -467,7 +488,8 @@ export default create({
       ...toRefs(props),
       translate,
       regionList,
-      transformData
+      transformData,
+      scrollDom
     };
   }
 });

src/packages/__VUE/elevator/index.taro.vue

@@ -130,6 +130,7 @@ export default create({
     });
 
     const fixedStyle = computed(() => {
+      console.log(11, state.listHeight, state.listGroup);
       return {
         height: `${state.listHeight[state.listGroup.length - 1]}px`
       };