hy-app 0.1.1 → 0.1.3

package/components/hy-swipe-action/index.scss

@@ -0,0 +1,9 @@
+
+.hy-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+}

package/components/hy-swipe-action/index.wxs

@@ -0,0 +1,235 @@
+/**
+ * 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
+ * wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
+ */
+
+
+// 开始触摸
+function touchstart(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照，此快照是属于整个组件的，在touchstart和touchmove事件中都能获取到相同的结果
+	var state = instance.getState()
+	if (state.disabled) return
+	var touches = event.touches
+	// 如果进行的是多指触控，不允许进行操作
+	if (touches && touches.length > 1) return
+	// 标识当前为滑动中状态
+	state.moving = true
+	// 记录触摸开始点的坐标值
+	state.startX = touches[0].pageX
+	state.startY = touches[0].pageY
+	
+	ownerInstance.callMethod('closeOther')
+}
+
+// 触摸滑动
+function touchmove(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	if (state.disabled || !state.moving) return
+	var touches = event.touches
+	var pageX = touches[0].pageX
+	var pageY = touches[0].pageY
+	var moveX = pageX - state.startX
+	var moveY = pageY - state.startY
+	var buttonsWidth = state.buttonsWidth
+
+	// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+	if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
+		event.preventDefault && event.preventDefault()
+		event.stopPropagation && event.stopPropagation()
+	}
+	// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格
+	if (Math.abs(moveX) < Math.abs(moveY)) return
+
+	// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
+	// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是
+	// 在超出后，设置为0
+	if (state.status === 'open') {
+		// 在开启状态下，向左滑动，需忽略
+		if (moveX < 0) moveX = 0
+		// 想要收起菜单，最大能移动的距离为按钮的总宽度
+		if (moveX > buttonsWidth) moveX = buttonsWidth
+		// 如果是已经打开了的状态，向左滑动时，移动收起菜单
+		moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
+	} else {
+		// 关闭状态下，右滑动需忽略
+		if (moveX > 0) moveX = 0
+		// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
+		if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
+		// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
+		moveSwipeAction(moveX, instance, ownerInstance)
+	}
+}
+
+// 触摸结束
+function touchend(event, ownerInstance) {
+	// 触发事件的组件的ComponentDescriptor实例
+	var instance = event.instance
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	if (!state.moving || state.disabled) return
+	var touches = event.changedTouches ? event.changedTouches[0] : {}
+	var pageX = touches.pageX
+	var pageY = touches.pageY
+	var moveX = pageX - state.startX
+	if (state.status === 'open') {
+		// 在展开的状态下，继续左滑，无需操作
+		if (moveX < 0) return
+		// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
+		if (moveX === 0) {
+			return closeSwipeAction(instance, ownerInstance)
+		}
+		// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
+		if (Math.abs(moveX) < state.threshold) {
+			openSwipeAction(instance, ownerInstance)
+		} else {
+			// 如果滑动距离大于阈值，则执行收起逻辑
+			closeSwipeAction(instance, ownerInstance)
+		}
+	} else {
+		// 在关闭的状态下，右滑，无需操作
+		if (moveX > 0) return
+		// 理由同上
+		if (Math.abs(moveX) < state.threshold) {
+			closeSwipeAction(instance, ownerInstance)
+		} else {
+			openSwipeAction(instance, ownerInstance)
+		}
+	}
+}
+
+// 获取过渡时间
+function getDuration(value) {
+	if (value.toString().indexOf('s') >= 0) return value
+	return value > 30 ? value + 'ms' : value + 's'
+}
+
+// 滑动结束时判断滑动的方向
+function getMoveDirection(instance, ownerInstance) {
+	var state = instance.getState()
+}
+
+// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+function moveSwipeAction(moveX, instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.hy-swipe-action-item__right__button')
+
+	// 设置菜单内容部分的偏移
+	instance.requestAnimationFrame(function() {
+		instance.setStyle({
+			// 设置translateX的值
+			'transition': 'none',
+			transform: 'translateX(' + moveX + 'px)',
+			'-webkit-transform': 'translateX(' + moveX + 'px)'
+		})
+	})
+}
+
+// 一次性展开滑动菜单
+function openSwipeAction(instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.hy-swipe-action-item__right__button')
+	// 处理duration单位问题
+	var duration = getDuration(state.duration)
+	// 展开过程中，是向左移动，所以X的偏移应该为负值
+	var buttonsWidth = -state.buttonsWidth
+	instance.requestAnimationFrame(function() {
+		// 设置菜单主体内容
+		instance.setStyle({
+			'transition': 'transform ' + duration,
+			'transform': 'translateX(' + buttonsWidth + 'px)',
+			'-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
+		})
+	})
+	setStatus('open', instance, ownerInstance)
+}
+
+// 标记菜单的当前状态，open-已经打开，close-已经关闭
+function setStatus(status, instance, ownerInstance) {
+	var state = instance.getState()
+	state.status = status
+	ownerInstance.callMethod('setState', status)
+}
+
+// 一次性收起滑动菜单
+function closeSwipeAction(instance, ownerInstance) {
+	var state = instance.getState()
+	// 获取所有按钮的实例，需要通过它去设置按钮的位移
+	var buttons = ownerInstance.selectAllComponents('.hy-swipe-action-item__right__button')
+	var len = buttons.length
+	// 处理duration单位问题
+	var duration = getDuration(state.duration)
+	instance.requestAnimationFrame(function() {
+		// 设置菜单主体内容
+		instance.setStyle({
+			'transition': 'transform ' + duration,
+			'transform': 'translateX(0px)',
+			'-webkit-transform': 'translateX(0px)'
+		})
+		// 设置各个隐藏的按钮为收起的状态
+		for (var i = len - 1; i >= 0; i--) {
+			buttons[i].setStyle({
+				'transition': 'transform ' + duration,
+				'transform': 'translateX(0px)',
+				'-webkit-transform': 'translateX(0px)'
+			})
+		}
+	})
+	setStatus('close', instance, ownerInstance)
+}
+
+// status的状态发生变化
+function statusChange(newValue, oldValue, ownerInstance, instance) {
+	var state = instance.getState()
+	if (state.disabled) return
+	// 打开或关闭单元格
+	if (newValue === 'close' && state.status === 'open') {
+		closeSwipeAction(instance, ownerInstance)
+	} else if(newValue === 'open' && state.status === 'close') {
+		openSwipeAction(instance, ownerInstance)
+	}
+}
+
+// 菜单尺寸发生变化
+function sizeChange(newValue, oldValue, ownerInstance, instance) {
+	// wxs内的局部变量快照
+	var state = instance.getState()
+	// 临时防止nv_disabled报错
+	if (!state || !newValue) {
+		return;
+	}
+	state.disabled = newValue.disabled
+	state.duration = newValue.duration
+	state.show = newValue.show
+	state.threshold = newValue.threshold
+	state.buttons = newValue.buttons
+
+	if (state.buttons) {
+		var len = state.buttons.length
+		var buttonsWidth = 0
+		var buttons = newValue.buttons
+		for (var i = 0; i < len; i++) {
+			buttonsWidth += buttons[i].width
+		}
+	}
+	state.buttonsWidth = buttonsWidth
+
+	// 支持默认打开
+	if (state.show) {
+		openSwipeAction(instance, ownerInstance)
+	}
+}
+
+module.exports = {
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend,
+	sizeChange: sizeChange,
+	statusChange: statusChange
+}

package/components/hy-swipe-action/props.ts

@@ -0,0 +1,16 @@
+import type IProps from "./typing";
+
+const defaultProps: IProps = {
+  list: [],
+  show: false,
+  name: "",
+  key: "id",
+  disabled: false,
+  threshold: 20,
+  autoClose: true,
+  options: [{ text: "删除" }],
+  duration: 300,
+  closeOnClick: true,
+};
+
+export default defaultProps;

package/components/hy-swipe-action/typing.d.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties } from "vue";
+
+interface SwipeActionOptionsVo {
+  text: string;
+  style?: CSSProperties;
+  icon?: string;
+  iconSize?: string | number;
+}
+
+export default interface IProps {
+  /**
+   * @description 数据列表
+   * */
+  list: Record<string, any>[];
+  /**
+   * @description 控制打开或者关闭（默认 false ）
+   * */
+  show?: boolean;
+  /**
+   * @description 标识符，如果是v-for，可用index索引值
+   * */
+  name?: string;
+  /**
+   * @description 唯一键值
+   * */
+  key?: string;
+  /**
+   * @description 是否禁用（默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
+   * */
+  threshold?: number;
+  /**
+   * @description 是否自动关闭其他swipe按钮组（默认 true ）
+   * */
+  autoClose?: boolean;
+  /**
+   * @description 右侧按钮内容
+   * */
+  options?: SwipeActionOptionsVo[];
+  /**
+   * @description 动画过渡时间，单位ms（默认 350 ）
+   * */
+  duration?: number;
+  /**
+   * @description 是否关闭
+   * */
+  closeOnClick: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-swipe-action/wxs.js

@@ -0,0 +1,15 @@
+export default {
+    methods: {
+        // 关闭时执行
+        closeHandler() {
+            this.status = 'close'
+        },
+        setState(status) {
+            this.status = status
+        },
+        closeOther() {
+            // 尝试关闭其他打开的单元格
+            this.parent && this.parent.closeOther(this)
+        }
+    }
+}

package/components/hy-swiper/hy-swiper-indicator.vue

@@ -4,11 +4,11 @@
       v-if="indicatorMode === 'line'"
       :class="[
         'hy-swiper-indicator__wrapper',
-        `hy-swiper-indicator__wrapper--${indicatorMode}`
+        `hy-swiper-indicator__wrapper--${indicatorMode}`,
       ]"
       :style="{
         width: addUnit(lineWidth * length),
-        backgroundColor: indicatorInactiveColor
+        backgroundColor: indicatorInactiveColor,
       }"
     >
       <view
@@ -22,7 +22,7 @@
         v-for="(item, index) in length"
         :key="index"
         :class="[
-          index === current && 'hy-swiper-indicator__wrapper__dot--active'
+          index === current && 'hy-swiper-indicator__wrapper__dot--active',
         ]"
         :style="[dotStyle(index)]"
       >
@@ -52,7 +52,7 @@ const lineStyle = computed<CSSProperties>(() => {
   let style: CSSProperties = {};
   style.width = addUnit(lineWidth.value);
   style.transform = `translateX(${addUnit(
-    Number(current.value) * lineWidth.value
+    Number(current.value) * lineWidth.value,
   )})`;
   style.backgroundColor = indicatorActiveColor.value;
   return style;
@@ -71,35 +71,5 @@ const dotStyle = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.hy-swiper-indicator {
-  &__wrapper {
-    @include flex;
-
-    &--line {
-      border-radius: 100px;
-      height: 4px;
-
-      &__bar {
-        width: 22px;
-        height: 4px;
-        border-radius: 100px;
-        background-color: #ffffff;
-        transition: transform 0.3s;
-      }
-    }
-
-    &__dot {
-      width: 5px;
-      height: 5px;
-      border-radius: 100px;
-      margin: 0 4px;
-
-      &--active {
-        width: 12px;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-swiper/hy-swiper.vue

@@ -4,7 +4,7 @@
     :style="{
       backgroundColor: bgColor,
       height: addUnit(height),
-      borderRadius: addUnit(radius)
+      borderRadius: addUnit(radius),
     }"
   >
     <view class="hy-swiper__loading" v-if="loading">
@@ -15,7 +15,7 @@
       class="hy-swiper__wrapper"
       :style="{
         flex: '1',
-        height: addUnit(height)
+        height: addUnit(height),
       }"
       @change="change"
       :circular="circular"
@@ -27,7 +27,7 @@
       :previousMargin="addUnit(previousMargin)"
       :nextMargin="addUnit(nextMargin)"
       :acceleration="acceleration"
-      :displayMultipleItems="displayMultipleItems"
+      :displayMultipleItems="list.length > 0 ? displayMultipleItems : 0"
       :easingFunction="easingFunction"
     >
       <swiper-item
@@ -36,7 +36,10 @@
         :key="index"
       >
         <slot :record="item" :index="index">
-          <view class="hy-swiper__wrapper__item__wrapper">
+          <view
+            class="hy-swiper__wrapper__item__wrapper"
+            :style="[itemStyle(index)]"
+          >
             <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
             <image
               class="hy-swiper__wrapper__item__wrapper__image"
@@ -46,7 +49,7 @@
               @tap="clickHandler(index)"
               :style="{
                 height: addUnit(height),
-                borderRadius: addUnit(radius)
+                borderRadius: addUnit(radius),
               }"
             ></image>
             <video
@@ -58,7 +61,7 @@
               :poster="getPoster(item)"
               :title="showTitle && hasTitle(item)"
               :style="{
-                height: addUnit(height)
+                height: addUnit(height),
               }"
               controls
               @tap="clickHandler(index)"
@@ -89,16 +92,27 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, watch, getCurrentInstance } from "vue";
+import {
+  computed,
+  toRefs,
+  ref,
+  watch,
+  getCurrentInstance,
+  type CSSProperties,
+} from "vue";
 import { addUnit, isVideo } from "../../utils";
 import defaultProps from "./props";
-import HyIcon from "../hy-icon/hy-icon.vue";
 import { IconConfig } from "../../config";
-import IProps, { SwiperVo } from "./typing";
+import type IProps from "./typing";
+import type { SwiperVo } from "./typing";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
 import HySwiperIndicator from "./hy-swiper-indicator.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { keyName, list, current } = toRefs(props);
+const { keyName, list, current, nextMargin, previousMargin, radius } =
+  toRefs(props);
 const emit = defineEmits(["click", "update:current", "change"]);
 
 const instance = getCurrentInstance();
@@ -108,7 +122,7 @@ watch(
   () => current.value,
   (newVal) => {
     currentIndex.value = newVal;
-  }
+  },
 );
 
 const hasTitle = computed(() => {
@@ -120,6 +134,25 @@ const hasTitle = computed(() => {
     }
   };
 });
+
+/**
+ * @description 轮播图3D效果
+ * */
+const itemStyle = computed(() => {
+  return (index: number): CSSProperties => {
+    const style: CSSProperties = {};
+    // #ifndef APP-NVUE || MP-TOUTIAO
+    // 左右流出空间的写法不支持nvue和头条
+    // 只有配置了此二值，才加上对应的圆角，以及缩放
+    if (nextMargin.value && previousMargin.value) {
+      style.borderRadius = addUnit(radius.value);
+      if (index !== currentIndex.value) style.transform = "scale(0.92)";
+    }
+    // #endif
+    return style;
+  };
+});
+
 /**
  * @description 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
  * */
@@ -185,58 +218,5 @@ const getItemType = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-swiper__wrapper {
-  flex: 1;
-}
-.hy-swiper {
-  @include flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-
-  &__wrapper {
-    flex: 1;
-
-    &__item {
-      flex: 1;
-
-      &__wrapper {
-        @include flex;
-        position: relative;
-        overflow: hidden;
-        transition: transform 0.3s;
-        flex: 1;
-
-        &__image {
-          flex: 1;
-        }
-
-        &__video {
-          flex: 1;
-        }
-
-        &__title {
-          position: absolute;
-          background-color: rgba(0, 0, 0, 0.3);
-          bottom: 0;
-          left: 0;
-          right: 0;
-          font-size: 28rpx;
-          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-lg;
-          color: #ffffff;
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  &__indicator {
-    position: absolute;
-    bottom: $hy-border-margin-padding-sm;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-swiper/index.scss

@@ -0,0 +1,82 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-swiper {
+  @include flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+
+  &__wrapper {
+    flex: 1;
+
+    &__item {
+      flex: 1;
+
+      &__wrapper {
+        @include flex;
+        position: relative;
+        overflow: hidden;
+        transition: transform 0.3s;
+        flex: 1;
+
+        &__image {
+          flex: 1;
+        }
+
+        &__video {
+          flex: 1;
+        }
+
+        &__title {
+          position: absolute;
+          background-color: rgba(0, 0, 0, 0.3);
+          bottom: 0;
+          left: 0;
+          right: 0;
+          font-size: 28rpx;
+          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-lg;
+          color: #ffffff;
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    bottom: $hy-border-margin-padding-sm;
+  }
+}
+
+
+.hy-swiper-indicator {
+  &__wrapper {
+    @include flex;
+
+    &--line {
+      border-radius: 100px;
+      height: 4px;
+
+      &__bar {
+        width: 22px;
+        height: 4px;
+        border-radius: $hy-border-radius-semicircle;
+        background-color: #ffffff;
+        transition: transform 0.3s;
+      }
+    }
+
+    &__dot {
+      width: 5px;
+      height: 5px;
+      border-radius: $hy-border-radius-semicircle;
+      margin: 0 $hy-border-margin-padding-sm;
+
+      &--active {
+        width: 12px;
+      }
+    }
+  }
+}

package/components/hy-swiper/props.ts

@@ -1,7 +1,7 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
-  list: () => [],
+  list: [],
   indicator: false,
   indicatorActiveColor: "#FFFFFF",
   indicatorInactiveColor: "rgba(255, 255, 255, 0.35)",
@@ -24,7 +24,7 @@ const defaultProps: IProps = {
   bgColor: "#f3f4f6",
   radius: 4,
   loading: false,
-  showTitle: false
+  showTitle: false,
 };
 
 export default defaultProps;