@10yun/cv-mobile-ui 0.5.43 → 0.5.45

package/uview-plus/components/u-row-notice/u-row-notice.vue

@@ -29,7 +29,7 @@ const dom = uni.requireNativePlugin('dom');
 /**
  * RowNotice 滚动通知中的水平滚动模式
  * @description 水平滚动
- * @tutorial https://ijry.github.io/uview-plus/components/noticeBar.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/noticeBar.html
  * @property {String | Number}	text			显示的内容，字符串
  * @property {String}			icon			是否显示左侧的音量图标 (默认 'volume' )
  * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标

package/uview-plus/components/u-safe-bottom/_doc/readme.md

@@ -4,7 +4,7 @@
 
 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 
-## [查看文档](https://ijry.github.io/uview-plus/components/safeAreaInset.html)
+## [查看文档](https://uview-plus.jiangruyi.com/components/safeAreaInset.html)
 
 ## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
 (请勿下载插件zip)
@@ -13,4 +13,4 @@
 	<img src="https://wuui.cn/intr.png">
 </a>
 
-**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://uview-plus.jiangruyi.com/components/qqFeedBack.html)**

package/uview-plus/components/u-safe-bottom/u-safe-bottom.vue

@@ -9,7 +9,7 @@ import { addStyle, deepMerge, addUnit, getWindowInfo } from '../../libs/function
 /**
  * SafeBottom 底部安全区
  * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
- * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/safeAreaInset.html
  * @property {type}		prop_name
  * @property {Object}	customStyle	定义需要用到的外部样式
  *
@@ -28,7 +28,7 @@ export default {
   computed: {
     style() {
       const style = {};
-      // #ifdef APP-NVUE || MP-TOUTIAO
+      // #ifdef APP-NVUE || MP-TOUTIAO || MP-WEIXIN
       // nvue下，高度使用js计算填充
       style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, 'px');
       // #endif
@@ -36,7 +36,7 @@ export default {
     }
   },
   mounted() {
-    // #ifdef APP-NVUE
+    // #ifdef APP-NVUE || MP-TOUTIAO || MP-WEIXIN
     // 标识为是否nvue
     this.isNvue = true;
     // #endif

package/uview-plus/components/u-scroll-list/cc-scroll-list.vue

@@ -0,0 +1,233 @@
+<template>
+  <view class="u-scroll-list" ref="u-scroll-list">
+    <!-- #ifdef APP-NVUE -->
+    <!-- nvue使用bindingX实现，以得到更好的性能 -->
+    <scroller
+      class="u-scroll-list__scroll-view"
+      ref="u-scroll-list__scroll-view"
+      scroll-direction="horizontal"
+      :show-scrollbar="false"
+      :offset-accuracy="1"
+      @scroll="nvueScrollHandler"
+    >
+      <view class="u-scroll-list__scroll-view__content">
+        <slot />
+      </view>
+    </scroller>
+    <!-- #endif -->
+
+    <!-- #ifndef APP-NVUE -->
+
+    <!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
+    <!-- 以上平台，支持wxs -->
+    <scroll-view
+      class="u-scroll-list__scroll-view"
+      scroll-x
+      :data-scrollWidth="scrollWidth"
+      :show-scrollbar="false"
+      :upper-threshold="0"
+      :lower-threshold="0"
+    >
+      <view class="u-scroll-list__scroll-view__content">
+        <slot />
+      </view>
+    </scroll-view>
+    <!-- <scroll-view
+      class="u-scroll-list__scroll-view"
+      scroll-x
+      @scroll="wxs.scroll"
+      @scrolltoupper="wxs.scrolltoupper"
+      @scrolltolower="wxs.scrolltolower"
+      :data-scrollWidth="scrollWidth"
+      :show-scrollbar="false"
+      :upper-threshold="0"
+      :lower-threshold="0"
+    >
+      <view class="u-scroll-list__scroll-view__content">
+        <slot />
+      </view>
+    </scroll-view> -->
+    <!-- #endif -->
+
+    <!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
+    <!-- 非以上平台，只能使用普通js实现 -->
+    <scroll-view
+      class="u-scroll-list__scroll-view"
+      scroll-x
+      @scroll="scrollHandler"
+      @scrolltoupper="scrolltoupperHandler"
+      @scrolltolower="scrolltolowerHandler"
+      :show-scrollbar="false"
+      :upper-threshold="0"
+      :lower-threshold="0"
+    >
+      <view class="u-scroll-list__scroll-view__content">
+        <slot />
+      </view>
+    </scroll-view>
+    <!-- #endif -->
+
+    <!-- #endif -->
+    <!-- <view class="u-scroll-list__indicator" v-if="indicator" :style="[addStyle(indicatorStyle)]">
+      <view class="u-scroll-list__indicator__line" :style="[lineStyle]">
+        <view class="u-scroll-list__indicator__line__bar" :style="[barStyle]" ref="u-scroll-list__indicator__line__bar"></view>
+      </view>
+    </view> -->
+  </view>
+</template>
+<script src="./scrollWxs.wxs" module="wxs" lang="wxs"></script>
+<script>
+/**
+ * scrollList 横向滚动列表
+ * @description 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
+ * @tutorial https://uview-plus.jiangruyi.com/components/scrollList.html
+ * @property {String | Number}	indicatorWidth			指示器的整体宽度 (默认 50 )
+ * @property {String | Number}	indicatorBarWidth		滑块的宽度 (默认 20 )
+ * @property {Boolean}			indicator				是否显示面板指示器 (默认 true )
+ * @property {String}			indicatorColor			指示器非激活颜色 (默认 '#f2f2f2' )
+ * @property {String}			indicatorActiveColor	指示器的激活颜色 (默认 '#3c9cff' )
+ * @property {String | Object}	indicatorStyle			指示器样式，可通过bottom，left，right进行定位
+ * @event {Function} left	滑动到左边时触发
+ * @event {Function} right	滑动到右边时触发
+ * @example
+ */
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+import nvueMixin from './nvue.js';
+// #endif
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, getPx, sleep } from '../../libs/function/index';
+export default {
+  name: 'u-scroll-list',
+  // #ifndef APP-NVUE
+  mixins: [mpMixin, mixin, props],
+  // #endif
+  // #ifdef APP-NVUE
+  mixins: [mpMixin, mixin, nvueMixin, props],
+  // #endif
+  data() {
+    return {
+      scrollInfo: {
+        scrollLeft: 0,
+        scrollWidth: 0
+      },
+      scrollWidth: 0
+    };
+  },
+  computed: {
+    // 指示器为线型的样式
+    barStyle() {
+      const style = {};
+      // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
+      // 此为普通js方案，只有在非nvue和不支持wxs方案的端才使用、
+      // 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
+      // 滑动距离(指示器的总宽度减去滑块宽度)的比值
+      const scrollLeft = this.scrollInfo.scrollLeft,
+        scrollWidth = this.scrollInfo.scrollWidth,
+        barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth;
+      const x = (scrollLeft / (scrollWidth - this.scrollWidth)) * barAllMoveWidth;
+      style.transform = `translateX(${x}px)`;
+      // #endif
+      // 设置滑块的宽度和背景色，是每个平台都需要的
+      style.width = addUnit(this.indicatorBarWidth);
+      style.backgroundColor = this.indicatorActiveColor;
+      return style;
+    },
+    lineStyle() {
+      const style = {};
+      // 指示器整体的样式，需要设置其宽度和背景色
+      style.width = addUnit(this.indicatorWidth);
+      style.backgroundColor = this.indicatorColor;
+      return style;
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  emits: ['left', 'right'],
+  methods: {
+    addStyle,
+    getPx,
+    init() {
+      this.getComponentWidth();
+    },
+    // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
+    // scroll-view触发滚动事件
+    scrollHandler(e) {
+      this.scrollInfo = e.detail;
+    },
+    scrolltoupperHandler() {
+      this.scrollEvent('left');
+      this.scrollInfo.scrollLeft = 0;
+    },
+    scrolltolowerHandler() {
+      this.scrollEvent('right');
+      // 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
+      // 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
+      this.scrollInfo.scrollLeft = getPx(this.indicatorWidth) - getPx(this.indicatorBarWidth);
+    },
+    // #endif
+    //
+    scrollEvent(status) {
+      this.$emit(status);
+    },
+    // 获取组件的宽度
+    async getComponentWidth() {
+      // 延时一定时间，以获取dom尺寸
+      await sleep(30);
+      // #ifndef APP-NVUE
+      this.$uGetRect('.u-scroll-list').then((size) => {
+        this.scrollWidth = size.width;
+      });
+      // #endif
+
+      // #ifdef APP-NVUE
+      const ref = this.$refs['u-scroll-list'];
+      ref &&
+        dom.getComponentRect(ref, (res) => {
+          this.scrollWidth = res.size.width;
+        });
+      // #endif
+    }
+  }
+};
+</script>
+<style scoped>
+.u-scroll-list {
+  padding-bottom: 10px;
+  padding-bottom: 0 !important;
+}
+.u-scroll-list__scroll-view {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.u-scroll-list__content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.u-scroll-list__indicator {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 15px;
+}
+.u-scroll-list__line {
+  width: 60px;
+  height: 4px;
+  border-radius: 100px;
+  overflow: hidden;
+}
+.u-scroll-list__bar {
+  width: 20px;
+  height: 4px;
+  border-radius: 100px;
+}
+</style>

package/uview-plus/components/u-scroll-list/style.css

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.u-empty,
-.u-empty__wrap,
-.u-tabs,
-.u-tabs__wrapper,
-.u-tabs__wrapper__scroll-view-wrapper,
-.u-tabs__wrapper__scroll-view,
-.u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line,
-.up-empty,
-.up-empty__wrap,
-.up-tabs,
-.up-tabs__wrapper,
-.up-tabs__wrapper__scroll-view-wrapper,
-.up-tabs__wrapper__scroll-view,
-.up-tabs__wrapper__nav,
-.up-tabs__wrapper__nav__line {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-scroll-list {
   padding-bottom: 10px;
 }

package/uview-plus/components/u-scroll-list/style.scss

@@ -1,5 +1,3 @@
-@import '../../libs/css/components.scss';
-
 .u-scroll-list {
   padding-bottom: 10px;