create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-swipe-action-item/other.js

@@ -0,0 +1,178 @@
+export default {
+	data() {
+		return {
+			state: {
+				moving: false,
+				startX: 0,
+				startY: 0,
+				buttonsWidth: 0
+			}
+		}
+	},
+	watch: {
+		status(newValue) {
+			if (this.disabled) return
+			// 打开或关闭单元格
+			if (newValue === 'close' && this.status === 'open') {
+				this.closeSwipeAction()
+			} else if(newValue === 'open' && this.status === 'close') {
+				this.openSwipeAction()
+			}
+		},
+		options(newVal) {
+			this.getBtnWidth()
+		}
+	},
+	mounted() {
+		this.getBtnWidth()
+	},
+    methods: {
+		clickHandler() {
+		},
+		closeHandler() {
+			this.closeSwipeAction()
+        },
+		setStatus(status) {
+			this.status = status
+		},
+		getBtnWidth() {
+			let view = uni.createSelectorQuery().in(this).select(".u-swipe-action-item__right");
+			view.fields({
+				size: true,
+				scrollOffset: true
+				}, data => {
+					this.state.buttonsWidth = data.width
+					// console.log("得到节点信息" + JSON.stringify(data));
+			}).exec();
+		},
+        // 开始触摸
+        touchstart(event) {
+			// console.log(event)
+			// 标识当前为滑动中状态
+			this.state.moving = true
+			// 记录触摸开始点的坐标值
+			var touches = event.touches
+			this.state.startX = touches[0].pageX
+			this.state.startY = touches[0].pageY
+			
+			// 关闭其它
+			// console.log(this.parent)
+			this.parent && this.parent.closeOther(this)
+        },
+        touchmove(event) {
+            // console.log(event)
+			if (this.disabled || !this.state.moving) return
+			var touches = event.touches
+			var pageX = touches[0].pageX
+			var pageY = touches[0].pageY
+			var moveX = pageX - this.state.startX
+			var moveY = pageY - this.state.startY
+
+			// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+			if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.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 (this.status === 'open') {
+				// 在开启状态下，向左滑动，需忽略
+				if (moveX < 0) moveX = 0
+				// 想要收起菜单，最大能移动的距离为按钮的总宽度
+				if (moveX > this.state.buttonsWidth) moveX = this.state.buttonsWidth
+				// 如果是已经打开了的状态，向左滑动时，移动收起菜单
+				this.moveSwipeAction(-this.state.buttonsWidth + moveX)
+			} else {
+				// 关闭状态下，右滑动需忽略
+				if (moveX > 0) moveX = 0
+				// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数
+				if (Math.abs(moveX) > this.state.buttonsWidth) moveX = -this.state.buttonsWidth
+				// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来
+				this.moveSwipeAction(moveX)
+			}
+        },
+        touchend(event) {
+            // console.log(event)
+			if (!this.state.moving || this.disabled) return
+			this.state.moving = false
+			var touches = event.changedTouches ? event.changedTouches[0] : {}
+			var pageX = touches.pageX
+			var pageY = touches.pageY
+			var moveX = pageX - this.state.startX
+			if (this.status === 'open') {
+				// 在展开的状态下，继续左滑，无需操作
+				if (moveX < 0) return
+				// 在开启状态下，点击一下内容区域，moveX为0，也即没有进行移动，这时执行收起菜单逻辑
+				if (moveX === 0) {
+					return this.closeSwipeAction()
+				}
+				// 在开启状态下，滑动距离小于阈值，则默认为不关闭，同时恢复原来的打开状态
+				if (Math.abs(moveX) < this.threshold) {
+					this.openSwipeAction()
+				} else {
+					// 如果滑动距离大于阈值，则执行收起逻辑
+					this.closeSwipeAction()
+				}
+			} else {
+				// 在关闭的状态下，右滑，无需操作
+				if (moveX > 0) return
+				// 理由同上
+				if (Math.abs(moveX) < this.threshold) {
+					this.closeSwipeAction()
+				} else {
+					this.openSwipeAction()
+				}
+			}
+        },
+		// 一次性展开滑动菜单
+		openSwipeAction() {
+			// 处理duration单位问题
+			var duration = this.getDuration(this.duration)
+			// 展开过程中，是向左移动，所以X的偏移应该为负值
+			var buttonsWidth = -this.state.buttonsWidth
+			this.sliderStyle = {
+				'transition': 'transform ' + duration,
+				'transform': 'translateX(' + buttonsWidth + 'px)',
+				'-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
+			}
+			this.setStatus('open')
+		},
+		// 一次性收起滑动菜单
+		closeSwipeAction() {
+			// 处理duration单位问题
+			var duration = this.getDuration(this.duration)
+			this.sliderStyle = {
+				'transition': 'transform ' + duration,
+				'transform': 'translateX(0px)',
+				'-webkit-transform': 'translateX(0px)'
+			}
+			// 设置各个隐藏的按钮为收起的状态
+			// for (var i = this.state.buttonsWidth - 1; i >= 0; i--) {
+			// 	buttons[i].setStyle({
+			// 		'transition': 'transform ' + duration,
+			// 		'transform': 'translateX(0px)',
+			// 		'-webkit-transform': 'translateX(0px)'
+			// 	})
+			// }
+			this.setStatus('close')
+		},
+		// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+		moveSwipeAction(moveX) {
+			// 设置菜单内容部分的偏移
+			this.sliderStyle = {
+				'transition': 'none',
+				transform: 'translateX(' + moveX + 'px)',
+				'-webkit-transform': 'translateX(' + moveX + 'px)'
+			}
+		},
+		// 获取过渡时间
+		getDuration(value) {
+			if (value.toString().indexOf('s') >= 0) return value
+			return value > 30 ? value + 'ms' : value + 's'
+		}
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-swipe-action-item/props.js

@@ -0,0 +1,47 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 控制打开或者关闭
+        show: {
+            type: Boolean,
+            default: () => defProps.swipeActionItem.show
+        },
+        closeOnClick: {
+            type: Boolean,
+            default: () => defProps.swipeActionItem.closeOnClick
+        },
+        // 标识符，如果是v-for，可用index索引值
+        name: {
+            type: [String, Number],
+            default: () => defProps.swipeActionItem.name
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            default: () => defProps.swipeActionItem.disabled
+        },
+        // 是否自动关闭其他swipe按钮组
+        autoClose: {
+            type: Boolean,
+            default: () => defProps.swipeActionItem.autoClose
+        },
+        // 滑动距离阈值，只有大于此值，才被认为是要打开菜单
+        threshold: {
+            type: Number,
+            default: () => defProps.swipeActionItem.threshold
+        },
+        // 右侧按钮内容
+        options: {
+            type: Array,
+            default() {
+                return defProps.swipeActionItem.rightOptions
+            }
+        },
+        // 动画过渡时间，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.swipeActionItem.duration
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-swipe-action-item/swipeActionItem.js

@@ -0,0 +1,22 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:01:13
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/swipeActionItem.js
+ */
+export default {
+    // swipeActionItem 组件
+    swipeActionItem: {
+        show: false,
+        closeOnClick: true,
+        name: '',
+        disabled: false,
+        threshold: 20,
+        autoClose: true,
+        options: [],
+        duration: 300
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-swipe-action-item/u-swipe-action-item.vue

@@ -0,0 +1,249 @@
+<template>	
+	<!-- #ifdef MP-ALIPAY -->
+	<!-- <import-sjs from="./alipay.sjs" name="mysjs" /> -->
+	<!-- #endif -->
+	<view class="u-swipe-action-item" ref="u-swipe-action-item">
+		<view class="u-swipe-action-item__right">
+			<slot name="button">
+				<view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
+					:ref="`u-swipe-action-item__right__button-${index}`" :style="[{
+						alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
+					}]" @tap="buttonClickHandler(item, index)">
+					<view class="u-swipe-action-item__right__button__wrapper" :style="[{
+							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+							borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
+							padding: item.style && item.style.borderRadius ? '0' : '0 15px',
+						}, item.style]">
+						<u-icon v-if="item.icon" :name="item.icon"
+							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
+							:size="item.iconSize ? addUnit(item.iconSize) : item.style && item.style.fontSize ? getPx(item.style.fontSize) * 1.2 : 17"
+							:customStyle="{
+								marginRight: item.text ? '2px' : 0
+							}"></u-icon>
+						<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
+							:style="[{
+								color: item.style && item.style.color ? item.style.color : '#ffffff',
+								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
+								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
+							}]">{{ item.text }}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+		<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5  -->
+		<view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
+			@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
+			:change:size="wxs.sizeChange">
+			<slot></slot>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO-->
+		<view class="u-swipe-action-item__content" @click="clickHandler" @touchstart="touchstart" @touchmove="touchmove"
+			@touchend="touchend" :style="sliderStyle">
+			<slot></slot>
+		</view>
+		<!-- <view class="u-swipe-action-item__content" @touchstart="mysjs.touchstart" @touchmove="mysjs.touchmove"
+			@touchend="mysjs.touchend">
+			<slot></slot>
+		</view> -->
+		<!-- #endif -->
+		<!-- #ifdef APP-NVUE -->
+		<view class="u-swipe-action-item__content" ref="u-swipe-action-item__content" @panstart="onTouchstart"
+			@tap="clickHandler">
+			<slot></slot>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
+<script src="./index.wxs" module="wxs" lang="wxs"></script>
+<!-- #endif -->
+<script>
+	import { touchMixin } from '../../libs/mixin/touch'
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, getPx, sleep } from '../../libs/function/index';
+	// #ifdef APP-NVUE
+	import nvue from './nvue.js';
+	// #endif
+	// #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5
+	import wxs from './wxs.js';
+	// #endif
+	// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
+	import other from './other.js';
+	// #endif
+	/**
+	 * SwipeActionItem 滑动单元格子组件
+	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
+	 * @tutorial https://ijry.github.io/uview-plus/components/swipeAction.html
+	 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
+	 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
+	 * @property {Boolean}			disabled		是否禁用（默认 false ）
+	 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
+	 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
+	 * @property {Array}			options			右侧按钮内容
+	 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
+	 * @event {Function(index)}	open	组件打开时触发
+	 * @event {Function(index)}	close	组件关闭时触发
+	 * @example	<u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
+	 */
+	export default {
+		name: 'u-swipe-action-item',
+		emits: ['click', 'update:show'],
+		mixins: [
+			mpMixin,
+			mixin,
+			// #ifndef APP-NVUE
+			touchMixin,
+			// #endif
+			// #ifdef APP-NVUE
+			nvue,
+			// #endif
+			// #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5
+			wxs,
+			// #endif
+			// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
+			other,
+			// #endif
+			props
+		],
+		data() {
+			return {
+				// 按钮的尺寸信息
+				size: {},
+				// 父组件u-swipe-action的参数
+				parentData: {
+					autoClose: true,
+				},
+				// 当前状态，open-打开，close-关闭
+				status: '',
+				sliderStyle: {}
+			}
+		},
+		watch: {
+			// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
+			// #ifndef APP-NVUE
+			wxsInit(newValue, oldValue) {
+				this.queryRect()
+			},
+			// #endif
+			status(newValue) {
+				if (newValue === 'open') {
+					this.$emit('update:show', true)
+					this.parent && this.parent.setOpendItem(this)
+				} else {
+					this.$emit('update:show', false)
+				}
+			},
+			show(newValue) {
+				if (newValue) {
+					this.status = 'open'
+				} else {
+					this.status = 'close'
+				}
+			}
+		},
+		computed: {
+			wxsInit() {
+				return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		beforeUmount() {
+			this.closeHandler()
+		},
+		methods: {
+			addUnit,
+			getPx,
+			init() {
+				// 初始化父组件数据
+				this.updateParentData()
+				// #ifndef APP-NVUE
+				sleep().then(() => {
+					this.queryRect()
+				})
+				// #endif
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('u-swipe-action')
+			},
+			// #ifndef APP-NVUE
+			// 查询节点
+			queryRect() {
+				this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
+					this.size = {
+						buttons,
+						show: this.show,
+						disabled: this.disabled,
+						threshold: this.threshold,
+						duration: this.duration
+					}
+				})
+			},
+			// #endif
+			// 按钮被点击
+			buttonClickHandler(item, index) {
+				let ret = this.$emit('click', {
+					index,
+					name: this.name
+				}, () => {
+				})
+				if (this.closeOnClick) {
+					this.closeHandler()
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-swipe-action-item {
+		position: relative;
+		overflow: hidden;
+		/* #ifndef APP-NVUE || MP-WEIXIN */
+		touch-action: pan-y;
+		/* #endif */
+
+		&__content {
+            transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
+			background-color: #FFFFFF;
+			z-index: 10;
+		}
+
+		&__right {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			@include flex;
+
+			&__button {
+				@include flex;
+				justify-content: center;
+				overflow: hidden;
+				align-items: center;
+
+				&__wrapper {
+					@include flex;
+					align-items: center;
+					justify-content: center;
+					padding: 0 15px;
+
+					&__text {
+						@include flex;
+						align-items: center;
+						color: #FFFFFF;
+						font-size: 15px;
+						text-align: center;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+</style>

package/template/src/uni_modules/uview-plus/components/u-swipe-action-item/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/template/src/uni_modules/uview-plus/components/u-swiper/props.js

@@ -0,0 +1,127 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
+        list: {
+            type: Array,
+            default: () => defProps.swiper.list
+        },
+        // 是否显示面板指示器
+        indicator: {
+            type: Boolean,
+            default: () => defProps.swiper.indicator
+        },
+        // 指示器非激活颜色
+        indicatorActiveColor: {
+            type: String,
+            default: () => defProps.swiper.indicatorActiveColor
+        },
+        // 指示器的激活颜色
+        indicatorInactiveColor: {
+            type: String,
+            default: () => defProps.swiper.indicatorInactiveColor
+        },
+        // 指示器样式，可通过bottom，left，right进行定位
+        indicatorStyle: {
+            type: [String, Object],
+            default: () => defProps.swiper.indicatorStyle
+        },
+        // 指示器模式，line-线型，dot-点型
+        indicatorMode: {
+            type: String,
+            default: () => defProps.swiper.indicatorMode
+        },
+        // 是否自动切换
+        autoplay: {
+            type: Boolean,
+            default: () => defProps.swiper.autoplay
+        },
+        // 当前所在滑块的 index
+        current: {
+            type: [String, Number],
+            default: () => defProps.swiper.current
+        },
+        // 当前所在滑块的 item-id ，不能与 current 被同时指定
+        currentItemId: {
+            type: String,
+            default: () => defProps.swiper.currentItemId
+        },
+        // 滑块自动切换时间间隔
+        interval: {
+            type: [String, Number],
+            default: () => defProps.swiper.interval
+        },
+        // 滑块切换过程所需时间
+        duration: {
+            type: [String, Number],
+            default: () => defProps.swiper.duration
+        },
+        // 播放到末尾后是否重新回到开头
+        circular: {
+            type: Boolean,
+            default: () => defProps.swiper.circular
+        },
+        // 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
+        previousMargin: {
+            type: [String, Number],
+            default: () => defProps.swiper.previousMargin
+        },
+        // 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持
+        nextMargin: {
+            type: [String, Number],
+            default: () => defProps.swiper.nextMargin
+        },
+        // 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持
+        acceleration: {
+            type: Boolean,
+            default: () => defProps.swiper.acceleration
+        },
+        // 同时显示的滑块数量，nvue、支付宝小程序不支持
+        displayMultipleItems: {
+            type: Number,
+            default: () => defProps.swiper.displayMultipleItems
+        },
+        // 指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
+        // 只对微信小程序有效
+        easingFunction: {
+            type: String,
+            default: () => defProps.swiper.easingFunction
+        },
+        // list数组中指定对象的目标属性名
+        keyName: {
+            type: String,
+            default: () => defProps.swiper.keyName
+        },
+        // 图片的裁剪模式
+        imgMode: {
+            type: String,
+            default: () => defProps.swiper.imgMode
+        },
+        // 组件高度
+        height: {
+            type: [String, Number],
+            default: () => defProps.swiper.height
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.swiper.bgColor
+        },
+        // 组件圆角，数值或带单位的字符串
+        radius: {
+            type: [String, Number],
+            default: () => defProps.swiper.radius
+        },
+        // 是否加载中
+        loading: {
+            type: Boolean,
+            default: () => defProps.swiper.loading
+        },
+        // 是否显示标题，要求数组对象中有title属性
+        showTitle: {
+            type: Boolean,
+            default: () => defProps.swiper.showTitle
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-swiper/swiper.js

@@ -0,0 +1,39 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:21:38
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/swiper.js
+ */
+export default {
+    // swiper 组件
+    swiper: {
+        list: [],
+        indicator: false,
+        indicatorActiveColor: '#FFFFFF',
+        indicatorInactiveColor: 'rgba(255, 255, 255, 0.35)',
+        indicatorStyle: '',
+        indicatorMode: 'line',
+        autoplay: true,
+        current: 0,
+        currentItemId: '',
+        interval: 3000,
+        duration: 300,
+        circular: false,
+        previousMargin: 0,
+        nextMargin: 0,
+        acceleration: false,
+        displayMultipleItems: 1,
+        easingFunction: 'default',
+        keyName: 'url',
+        imgMode: 'aspectFill',
+        height: 130,
+        bgColor: '#f3f4f6',
+        radius: 4,
+        loading: false,
+        showTitle: false
+    }
+
+}