@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-index-list/u-index-list.vue

@@ -1,15 +1,16 @@
 <template>
-  <view class="u-index-list">
+  <view ref="u-index-list" class="u-index-list">
     <!-- #ifdef APP-NVUE -->
     <list
       :scrollTop="scrollTop"
       enable-back-to-top
       :offset-accuracy="1"
       :style="{
-        maxHeight: $u.addUnit(scrollViewHeight)
+        maxHeight: addUnit(scrollViewHeight)
       }"
       @scroll="scrollHandler"
-      ref="uList"
+      ref="u-index-list__scroll-view"
+      class="u-index-list__scroll-view"
     >
       <cell v-if="$slots.header" ref="header">
         <slot name="header" />
@@ -26,17 +27,18 @@
       :scrollIntoView="scrollIntoView"
       :offset-accuracy="1"
       :style="{
-        maxHeight: $u.addUnit(scrollViewHeight)
+        maxHeight: addUnit(scrollViewHeight)
       }"
       scroll-y
       @scroll="scrollHandler"
-      ref="uList"
+      ref="u-index-list__scroll-view"
+      class="u-index-list__scroll-view"
     >
-      <view v-if="$slots.header">
+      <view class="u-index-list__header" v-if="$slots.header">
         <slot name="header" />
       </view>
       <slot />
-      <view v-if="$slots.footer">
+      <view class="u-index-list__footer" v-if="$slots.footer">
         <slot name="footer" />
       </view>
     </scroll-view>
@@ -44,11 +46,11 @@
     <view
       class="u-index-list__letter"
       ref="u-index-list__letter"
-      :style="{ top: $u.addUnit(letterInfo.top || 100) }"
-      @touchstart="touchStart"
-      @touchmove.stop.prevent="touchMove"
-      @touchend.stop.prevent="touchEnd"
-      @touchcancel.stop.prevent="touchEnd"
+      :style="{ top: addUnit(letterInfo.top), transform: 'translateY(-50%)' }"
+      @touchstart.prevent="touchStart"
+      @touchmove.prevent="touchMove"
+      @touchend.prevent="touchEnd"
+      @touchcancel.prevent="touchEnd"
     >
       <view
         class="u-index-list__letter__item"
@@ -67,18 +69,18 @@
       mode="fade"
       :show="touching"
       :customStyle="{
-        position: 'fixed',
+        position: 'absolute',
         right: '50px',
-        top: $u.addUnit(indicatorTop),
-        zIndex: 2
+        top: addUnit(indicatorTop, 'px'),
+        zIndex: 3
       }"
     >
       <view
         class="u-index-list__indicator"
         :class="['u-index-list__indicator--show']"
         :style="{
-          height: $u.addUnit(indicatorHeight),
-          width: $u.addUnit(indicatorHeight)
+          height: addUnit(indicatorHeight),
+          width: addUnit(indicatorHeight)
         }"
       >
         <text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
@@ -95,9 +97,10 @@ const indexList = () => {
   }
   return indexList;
 };
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, getWindowInfo, sleep, getPx } from '../../libs/function/index';
 // #ifdef APP-NVUE
 // 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
 const dom = uni.requireNativePlugin('dom');
@@ -105,7 +108,7 @@ const dom = uni.requireNativePlugin('dom');
 /**
  * IndexList 索引列表
  * @description  通过折叠面板收纳内容区域
- * @tutorial https://uviewui.com/components/indexList.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/indexList.html
  * @property {String}			inactiveColor	右边锚点非激活的颜色 ( 默认 '#606266' )
  * @property {String}			activeColor		右边锚点激活的颜色 ( 默认 '#5677fc' )
  * @property {Array}			indexList		索引字符列表，数组形式
@@ -143,9 +146,11 @@ export default {
       // scroll-view的高度
       scrollViewHeight: 0,
       // 系统信息
-      sys: uni.$u.sys(),
+      sys: {},
       scrolling: false,
-      scrollIntoView: ''
+      scrollIntoView: '',
+      pageY: 0,
+      topOffset: 0
     };
   },
   computed: {
@@ -155,16 +160,16 @@ export default {
     },
     // 字母放大指示器的top值，为了让其指向当前激活的字母
     indicatorTop() {
-      const { top, itemHeight } = this.letterInfo;
-      return Math.floor(top + itemHeight * this.activeIndex + itemHeight / 2 - this.indicatorHeight / 2);
+      const { top, height, itemHeight } = this.letterInfo;
+      return Math.floor(top - height / 2 + itemHeight * this.activeIndex + itemHeight - 70 / 2);
     }
   },
   watch: {
     // 监听字母索引的变化，重新设置尺寸
     uIndexList: {
-      immediate: true,
+      immediate: false,
       handler() {
-        uni.$u.sleep().then(() => {
+        sleep(30).then(() => {
           this.setIndexListLetterInfo();
         });
       }
@@ -173,27 +178,44 @@ export default {
   created() {
     this.children = [];
     this.anchors = [];
-    this.init();
+    this.sys = getWindowInfo();
   },
   mounted() {
-    this.setIndexListLetterInfo();
+    this.init();
+    sleep(50).then(() => {
+      this.setIndexListLetterInfo();
+    });
   },
   methods: {
+    addUnit,
     init() {
       // 设置列表的高度为整个屏幕的高度
       //减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
       //解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
-      this.scrollViewHeight = this.sys.windowHeight - this.customNavHeight;
+      let customNavHeight = getPx(this.customNavHeight);
+      // this.scrollViewHeight = this.sys.windowHeight - customNavHeight
+      this.getIndexListRect().then(async (sizeScroll) => {
+        this.scrollViewHeight = sizeScroll.height ? sizeScroll.height : this.sys.windowHeight - customNavHeight;
+        this.topOffset = this.sys.windowHeight - this.scrollViewHeight;
+        // console.log('scrollViewHeight', this.scrollViewHeight)
+        // console.log('topOffset', this.topOffset)
+      });
     },
     // 索引列表被触摸
     touchStart(e) {
       // 获取触摸点信息
-      const touchStart = e.changedTouches[0];
-      if (!touchStart) return;
+      const touchStartData = e.changedTouches[0];
+      if (!touchStartData) return;
       this.touching = true;
-      const { pageY } = touchStart;
+      const { pageY, screenY } = touchStartData;
       // 根据当前触摸点的坐标，获取当前触摸的为第几个字母
+      // #ifdef APP-NVUE
+      // 使用screenY要减去导航栏44和状态栏24高度
+      const currentIndex = this.getIndexListLetter(screenY - 68);
+      // #endif
+      // #ifndef APP-NVUE
       const currentIndex = this.getIndexListLetter(pageY);
+      // #endif
       this.setValueForTouch(currentIndex);
     },
     // 索引字母列表被触摸滑动中
@@ -205,14 +227,20 @@ export default {
       if (!this.touching) {
         this.touching = true;
       }
-      const { pageY } = touchMove;
+      const { pageY, screenY } = touchMove;
+      // #ifdef APP-NVUE
+      // 使用screenY要减去导航栏44和状态栏24高度
+      const currentIndex = this.getIndexListLetter(screenY - 68);
+      // #endif
+      // #ifndef APP-NVUE
       const currentIndex = this.getIndexListLetter(pageY);
+      // #endif
       this.setValueForTouch(currentIndex);
     },
     // 触摸结束
     touchEnd(e) {
       // 延时一定时间后再隐藏指示器，为了让用户看的更直观，同时也是为了消除快速切换u-transition的show带来的影响
-      uni.$u.sleep(300).then(() => {
+      sleep(300).then(() => {
         this.touching = false;
       });
     },
@@ -233,53 +261,104 @@ export default {
         // #endif
       });
     },
+    getIndexListScrollViewRect() {
+      return new Promise((resolve) => {
+        // 延时一定时间，以获取dom尺寸
+        // #ifndef APP-NVUE
+        this.$uGetRect('.u-index-list__scroll-view').then((size) => {
+          resolve(size);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        const ref = this.$refs['u-index-list__scroll-view'];
+        dom.getComponentRect(ref, (res) => {
+          resolve(res.size);
+        });
+        // #endif
+      });
+    },
+    getIndexListRect() {
+      return new Promise((resolve) => {
+        // 延时一定时间，以获取dom尺寸
+        // #ifndef APP-NVUE
+        this.$uGetRect('.u-index-list').then((size) => {
+          resolve(size);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        const ref = this.$refs['u-index-list'];
+        dom.getComponentRect(ref, (res) => {
+          resolve(res.size);
+        });
+        // #endif
+      });
+    },
     // 设置indexList索引的尺寸信息
     setIndexListLetterInfo() {
       this.getIndexListLetterRect().then((size) => {
+        // console.log('getIndexListLetterRect', size)
         const { height } = size;
-        const sys = uni.$u.sys();
-        const windowHeight = sys.windowHeight;
+        const sysData = getWindowInfo();
+        const windowHeight = sysData.windowHeight;
         let customNavHeight = 0;
         // 消除各端导航栏非原生和原生导致的差异，让索引列表字母对屏幕垂直居中
         if (this.customNavHeight == 0) {
           // #ifdef H5
-          customNavHeight = sys.windowTop;
+          customNavHeight = sysData.windowTop;
           // #endif
           // #ifndef H5
           // 在非H5中，为原生导航栏，其高度不算在windowHeight内，这里设置为负值，后面相加时变成减去其高度的一半
-          customNavHeight = -(sys.statusBarHeight + 44);
+          customNavHeight = -(sysData.statusBarHeight + 44);
           // #endif
         } else {
-          customNavHeight = uni.$u.getPx(this.customNavHeight);
+          customNavHeight = getPx(this.customNavHeight);
         }
-        this.letterInfo = {
-          height,
-          // 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
-          top: (windowHeight - height) / 2 + customNavHeight / 2,
-          itemHeight: Math.floor(height / this.uIndexList.length)
-        };
+        this.getIndexListScrollViewRect().then((sizeScroll) => {
+          // console.log('sizeScroll', sizeScroll)
+          this.letterInfo = {
+            height,
+            // 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
+            top: sizeScroll.height / 2,
+            // top: (this.scrollViewHeight - height) / 2 + customNavHeight / 2,
+            itemHeight: Math.floor(height / this.uIndexList.length)
+          };
+        });
       });
     },
     // 获取当前被触摸的索引字母
     getIndexListLetter(pageY) {
-      const { top, height, itemHeight } = this.letterInfo;
+      this.pageY = pageY;
+      let { top, height, itemHeight } = this.letterInfo;
+      let index = this.currentIndex;
       // 对H5的pageY进行修正，这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
       // #ifdef H5
-      pageY += uni.$u.sys().windowTop;
+      // pageY += getWindowInfo().windowTop
       // #endif
       // 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
+      // console.log('top1', top)
+      // console.log('height', height)
+      top = top - height / 2; // 减去transfrom的translateY值导致的高度
+      pageY = pageY - this.topOffset;
+      // if (this.safeBottomFix) {
+      // 	pageY = pageY + 34
+      // }
+      // console.log('topOffset', this.topOffset)
+      // console.log('pageY', pageY)
+      // console.log('top2', top)
       if (pageY < top) {
-        return 0;
+        index = 0;
       } else if (pageY >= top + height) {
         // 如果超出了，取最后一个字母
-        return this.uIndexList.length - 1;
+        index = this.uIndexList.length - 1;
       } else {
         // 将触摸点的Y轴偏移值，减去索引字母的top值，除以每个字母的高度，即可得到当前触摸点落在哪个字母上
-        return Math.floor((pageY - top) / itemHeight);
+        index = Math.floor((pageY - top) / itemHeight);
       }
+      // console.log(index)
+      return index;
     },
     // 设置各项由触摸而导致变化的值
-    setValueForTouch(currentIndex) {
+    async setValueForTouch(currentIndex) {
       // 如果偏移量太小，前后得出的会是同一个索引字母，为了防抖，进行返回
       if (currentIndex === this.activeIndex) return;
       this.activeIndex = currentIndex;
@@ -289,11 +368,36 @@ export default {
       // #endif
       // #ifdef MP-WEIXIN
       // 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
-      this.scrollTop = this.children[currentIndex].top;
+      const customNavHeight = this.customNavHeight;
+      // 获取header slot的尺寸信息
+      const header = await this.getHeaderRect();
+      // item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
+      let top = header.height;
+      // console.log(top)
+      const anchors = this.anchors;
+      // 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
+      let children = this.children.map((item, index) => {
+        const child = {
+          height: item.height,
+          top: top
+        };
+        // 进行累加，给下一个item提供计算依据
+        top = top + item.height;
+        // #ifdef APP-NVUE
+        // 只有nvue下，需要将锚点的高度也累加，非nvue下锚点高度是包含在index-item中的。
+        top = top + anchors[index].height;
+        // #endif
+        return child;
+      });
+      // console.log('this.children[currentIndex].top', children[currentIndex].top)
+      if (children[currentIndex]?.top) {
+        this.scrollTop = children[currentIndex].top - getPx(customNavHeight);
+      }
       // #endif
       // #ifdef APP-NVUE
       // 在nvue中，由于cell和header为同级元素，所以实际是需要对header(anchor)进行偏移
       const anchor = `u-index-anchor-${this.uIndexList[currentIndex]}`;
+      // console.log(anchor)
       dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], {
         offset: 0,
         animated: false
@@ -303,9 +407,29 @@ export default {
     getHeaderRect() {
       // 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
       return new Promise((resolve) => {
-        dom.getComponentRect(this.$refs.header, (res) => {
+        if (!this.$slots.header) {
+          resolve({
+            width: 0,
+            height: 0
+          });
+        }
+        // #ifndef APP-NVUE
+        this.$uGetRect('.u-index-list__header').then((size) => {
+          resolve(size);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        let headerRef = this.$refs.header;
+        if (!headerRef) {
+          resolve({
+            width: 0,
+            height: 0
+          });
+        }
+        dom.getComponentRect(headerRef, (res) => {
           resolve(res.size);
         });
+        // #endif
       });
     },
     // scroll-view的滚动事件
@@ -313,35 +437,44 @@ export default {
       if (this.touching || this.scrolling) return;
       // 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
       this.scrolling = true;
-      uni.$u.sleep(10).then(() => {
+      sleep(10).then(() => {
         this.scrolling = false;
       });
       let scrollTop = 0;
       const len = this.children.length;
       let children = this.children;
-      const anchors = this.anchors;
       // #ifdef APP-NVUE
       // nvue下获取的滚动条偏移为负数，需要转为正数
-      scrollTop = Math.abs(e.contentOffset.y);
+      let sys = getWindowInfo();
+      scrollTop = Math.abs(e.contentOffset.y) / 10;
+      // console.log('native', e)
+      // #endif
       // 获取header slot的尺寸信息
       const header = await this.getHeaderRect();
       // item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
       let top = header.height;
+      const anchors = this.anchors;
       // 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
       children = this.children.map((item, index) => {
         const child = {
           height: item.height,
-          top
+          top: top
         };
         // 进行累加，给下一个item提供计算依据
-        top += item.height + anchors[index].height;
+        top = top + item.height;
+        // #ifdef APP-NVUE
+        // 只有nvue下，需要将锚点的高度也累加，非nvue下锚点高度是包含在index-item中的。
+        top = top + anchors[index].height;
+        // #endif
         return child;
       });
-      // #endif
       // #ifndef APP-NVUE
       // 非nvue通过detail获取滚动条位移
       scrollTop = e.detail.scrollTop;
+      // console.log('scrollTop', scrollTop, this.customNavHeight)
       // #endif
+      // 在弹窗中需要加上弹窗距离顶部的高度topOffset
+      scrollTop = scrollTop + getPx(this.customNavHeight);
       for (let i = 0; i < len; i++) {
         const item = children[i],
           nextItem = children[i + 1];

package/uview-plus/{libs/config/props → components/u-input}/input.js

@@ -17,7 +17,7 @@ export default {
 		disabledColor: '#f5f7fa',
 		clearable: false,
 		password: false,
-		maxlength: -1,
+		maxlength: 140,
 		placeholder: null,
 		placeholderClass: 'input-placeholder',
 		placeholderStyle: 'color: #c0c4cc',