uview-ui-wjf 1.0.0

package/components/u-skeleton/u-skeleton.vue

@@ -0,0 +1,244 @@
+<template>
+	<view class="u-skeleton">
+		<view
+		    class="u-skeleton__wrapper"
+		    ref="u-skeleton__wrapper"
+		    v-if="loading"
+			style="display: flex; flex-direction: row;"
+		>
+			<view
+			    class="u-skeleton__wrapper__avatar"
+			    v-if="avatar"
+			    :class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
+			    :style="{
+						height: $u.addUnit(avatarSize),
+						width: $u.addUnit(avatarSize)
+					}"
+			></view>
+			<view
+			    class="u-skeleton__wrapper__content"
+			    ref="u-skeleton__wrapper__content"
+				style="flex: 1;"
+			>
+				<view
+				    class="u-skeleton__wrapper__content__title"
+				    v-if="title"
+				    :style="{
+							width: uTitleWidth,
+							height: $u.addUnit(titleHeight),
+						}"
+				    :class="[animate && 'animate']"
+				></view>
+				<view
+				    class="u-skeleton__wrapper__content__rows"
+				    :class="[animate && 'animate']"
+				    v-for="(item, index) in rowsArray"
+				    :key="index"
+				    :style="{
+							 width: item.width,
+							 height: item.height,
+							 marginTop: item.marginTop
+						}"
+				>
+		
+				</view>
+			</view>
+		</view>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+	const dom = uni.requireNativePlugin('dom')
+	const animation = uni.requireNativePlugin('animation')
+	// #endif
+	/**
+	 * Skeleton 骨架屏
+	 * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
+	 * @tutorial https://www.uviewui.com/components/skeleton.html
+	 * @property {Boolean}					loading		是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
+	 * @property {Boolean}					animate		是否开启动画效果 (默认 true )
+	 * @property {String | Number}			rows		段落占位图行数 (默认 0 )
+	 * @property {String | Number | Array}	rowsWidth	段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' )
+	 * @property {String | Number | Array}	rowsHeight	段落的高度 (默认 18 )
+	 * @property {Boolean}					title		是否展示标题占位图 (默认 true )
+	 * @property {String | Number}			titleWidth	标题的宽度 (默认 '50%' )
+	 * @property {String | Number}			titleHeight	标题的高度 (默认 18 )
+	 * @property {Boolean}					avatar		是否展示头像占位图 (默认 false )
+	 * @property {String | Number}			avatarSize	头像占位图大小 (默认 32 )
+	 * @property {String}					avatarShape	头像占位图的形状，circle-圆形，square-方形 (默认 'circle' )
+	 * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
+	 */
+	export default {
+		name: 'u-skeleton',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				width: 0,
+			}
+		},
+		watch: {
+			loading() {
+				this.getComponentWidth()
+			}
+		},
+		computed: {
+			rowsArray() {
+				if (/%$/.test(this.rowsHeight)) {
+					uni.$u.error('rowsHeight参数不支持百分比单位')
+				}
+				const rows = []
+				for (let i = 0; i < this.rows; i++) {
+					let item = {},
+						// 需要预防超出数组边界的情况
+						rowWidth = uni.$u.test.array(this.rowsWidth) ? (this.rowsWidth[i] || (i === this.row - 1 ? '70%' : '100%')) : i ===
+						this.rows - 1 ? '70%' : this.rowsWidth,
+						rowHeight = uni.$u.test.array(this.rowsHeight) ? (this.rowsHeight[i] || '18px') : this.rowsHeight
+					// 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
+					// 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类
+					item.marginTop = !this.title && i === 0 ? 0 : this.title && i === 0 ? '20px' : '12px'
+					// 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位
+					if (/%$/.test(rowWidth)) {
+						// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
+						item.width = uni.$u.addUnit(this.width * parseInt(rowWidth) / 100)
+					} else {
+						item.width = uni.$u.addUnit(rowWidth)
+					}
+					item.height = uni.$u.addUnit(rowHeight)
+					rows.push(item)
+				}
+				// console.log(rows);
+				return rows
+			},
+			uTitleWidth() {
+				let tWidth = 0
+				if (/%$/.test(this.titleWidth)) {
+					// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
+					tWidth = uni.$u.addUnit(this.width * parseInt(this.titleWidth) / 100)
+				} else {
+					tWidth = uni.$u.addUnit(this.titleWidth)
+				}
+				return uni.$u.addUnit(tWidth)
+			},
+			
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.getComponentWidth()
+				// #ifdef APP-NVUE
+				this.loading && this.animate && this.setNvueAnimation()
+				// #endif
+			},
+			async setNvueAnimation() {
+				// #ifdef APP-NVUE
+				// 为了让opacity:1的状态保持一定时间，这里做一个延时
+				await uni.$u.sleep(500)
+				const skeleton = this.$refs['u-skeleton__wrapper'];
+				skeleton && this.loading && this.animate && animation.transition(skeleton, {
+					styles: {
+						opacity: 0.5
+					},
+					duration: 600,
+				}, () => {
+					// 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
+					// 会停留在opacity: 0.5的状态中
+					animation.transition(skeleton, {
+						styles: {
+							opacity: 1
+						},
+						duration: 600,
+					}, () => {
+						// 只有在loading中时，才执行动画
+						this.loading && this.animate && this.setNvueAnimation()
+					})
+				})
+				// #endif
+			},
+			// 获取组件的宽度
+			async getComponentWidth() {
+				// 延时一定时间，以获取dom尺寸
+				await uni.$u.sleep(20)
+				// #ifndef APP-NVUE
+				this.$uGetRect('.u-skeleton__wrapper__content').then(size => {
+					this.width = size.width
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				const ref = this.$refs['u-skeleton__wrapper__content']
+				ref && dom.getComponentRect(ref, (res) => {
+					this.width = res.size.width
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	@mixin background {
+		/* #ifdef APP-NVUE */
+		background-color: #F1F2F4;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+		background-size: 400% 100%;
+		/* #endif */
+	}
+
+	.u-skeleton {
+		flex: 1;
+		
+		&__wrapper {
+			@include flex(row);
+			
+			&__avatar {
+				@include background;
+				margin-right: 15px;
+			
+				&--circle {
+					border-radius: 100px;
+				}
+			
+				&--square {
+					border-radius: 4px;
+				}
+			}
+			
+			&__content {
+				flex: 1;
+			
+				&__rows,
+				&__title {
+					@include background;
+					border-radius: 3px;
+				}
+			}
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	.animate {
+		animation: skeleton 1.8s ease infinite
+	}
+
+	@keyframes skeleton {
+		0% {
+			background-position: 100% 50%
+		}
+
+		100% {
+			background-position: 0 50%
+		}
+	}
+
+	/* #endif */
+</style>

package/components/u-slider/mpother.js

@@ -0,0 +1,113 @@
+/**
+ * 使用普通的js方案实现slider
+ */
+export default {
+    watch: {
+        value(n) {
+            // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+            if (this.status === 'end') {
+                this.updateSliderPlacement(n, true)
+            }
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    methods: {
+        init() {
+            this.getSliderRect()
+        },
+        // 获取slider尺寸
+        getSliderRect() {
+            // 获取滑块条的尺寸信息
+            setTimeout(() => {
+                this.$uGetRect('.u-slider').then((rect) => {
+                    this.sliderRect = rect
+                    this.updateSliderPlacement(this.value, true)
+                })
+            }, 10)
+        },
+        // 是否可以操作
+        canNotDo() {
+            return this.disabled
+        },
+        // 获取当前手势点的X轴位移值
+        getTouchX(e) {
+            return e.touches[0].clientX
+        },
+        formatStep(value) {
+            // 移动点占总长度的百分比
+            return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
+        },
+        // 发出事件
+        emitEvent(event, value) {
+            this.$emit(event, value || this.value)
+        },
+        // 标记当前手势的状态
+        setTouchStatus(status) {
+            this.status = status
+        },
+        onTouchStart(e) {
+            if (this.canNotDo()) {
+                return
+            }
+            // 标示当前的状态为开始触摸滑动
+            this.emitEvent('start')
+            this.setTouchStatus('start')
+        },
+        onTouchMove(e) {
+            if (this.canNotDo()) {
+                return
+            }
+            // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+            const x = this.getTouchX(e)
+            const { left, width } = this.sliderRect
+            const distanceX = x - left
+            // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+            // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+            const percent = (distanceX / width) * 100
+            this.setTouchStatus('moving')
+            this.updateSliderPlacement(percent, true, 'moving')
+        },
+        onTouchEnd() {
+            if (this.canNotDo()) {
+                return
+            }
+            this.emitEvent('end')
+            this.setTouchStatus('end')
+        },
+        // 设置滑点的位置
+        updateSliderPlacement(value, drag, event) {
+            // 去掉小数部分，同时也是对step步进的处理
+            const { width } = this.sliderRect
+            const percent = this.formatStep(value)
+            // 设置移动的值
+            const barStyle = {
+                width: `${percent / 100 * width}px`
+            }
+            // 移动期间无需过渡动画
+            if (drag === true) {
+                barStyle.transition = 'none'
+            } else {
+                // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+                delete barStyle.transition
+            }
+            // 修改value值
+            this.$emit('input', percent)
+            // 事件的名称
+            if (event) {
+                this.emitEvent(event, percent)
+            }
+            this.barStyle = barStyle
+        },
+        onClick(e) {
+            if (this.canNotDo()) {
+                return
+            }
+            // 直接点击滑块的情况，计算方式与onTouchMove方法相同
+            const { left, width } = this.sliderRect
+            const value = ((e.detail.x - left) / width) * 100
+            this.updateSliderPlacement(value, false, 'click')
+        }
+    }
+}

package/components/u-slider/mpwxs.js

@@ -0,0 +1,42 @@
+export default {
+    data() {
+        return {
+            sliderRect: {},
+            info: {
+                width: null,
+                left: null,
+                step: this.step,
+                disabled: this.disabled,
+                min: this.min,
+                max: this.max,
+                value: this.value
+            }
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    methods: {
+        init() {
+            this.getSliderRect()
+        },
+        // 获取slider尺寸
+        getSliderRect() {
+            // 获取滑块条的尺寸信息
+            uni.$u.sleep().then(() => {
+                this.$uGetRect('.u-slider').then((rect) => {
+                    this.info.width = rect.width
+                    this.info.left = rect.left
+                })
+            })
+        },
+        // 此方法由wxs调用，用于修改v-model绑定的值
+        updateValue(value) {
+            this.$emit('input', value)
+        },
+        // 此方法由wxs调用，发出事件
+        emitEvent(e) {
+            this.$emit(e.event, e.value ? e.value : this.value)
+        }
+    }
+}

package/components/u-slider/mpwxs.wxs

@@ -0,0 +1,121 @@
+/**
+ * 使用wxs方案实现slider
+ * 兼容微信，QQ，H5，Vue版的安卓和iOS
+ */
+/**
+ * 开始滑动操作
+ * @param {Object} e
+ * @param {Object} ownerInstance
+ */
+function onTouchMove(e, ownerInstance) {
+	// wxs事件对象下有一个instance属性，表示当前触发此事件的组件的实例，通过该实例，可以获取相关的dataset，设置样式等信息
+	// https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
+	var instance = e.instance;
+	// getState()为一个对象，挂载在instance上，类似组件的data一样，可以存放一些变量，供以后的触发事件中使用
+	var state = instance.getState()
+
+	// 滑块组件的整体尺寸信息
+	var mp = state.mp
+	if(mp.disabled) {
+		return
+	}
+	
+	var distanceX = getTouchX(e) - mp.left
+	// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，step大于1时，不能用此更新视图
+	var percent = (distanceX / mp.width) * 100
+
+	updateSliderPlacement(instance, ownerInstance, percent, 'moving')
+	
+	// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
+	e.stopPropagation && e.stopPropagation() 
+	e.preventDefault && e.preventDefault()
+}
+
+function onClick(e, ownerInstance) {
+	var instance = e.instance
+	var state = instance.getState()
+	var mp = state.mp
+	if(mp.disabled) {
+		return
+	}
+	
+	// 直接点击滑块的情况，计算方式与onTouchMove方法相同
+	var value = ((e.detail.x - mp.left) / mp.width) * 100
+	updateSliderPlacement(instance, ownerInstance, value, 'click')
+}
+
+function sizeReady(newValue, oldValue, ownerInstance, instance) {
+	// 页面初始化时候，也会触发此方法，传递的值为空，这里不执行往后的逻辑
+	if(!newValue || newValue.disabled) {
+		return 
+	}
+	var state = instance.getState()
+	state.mp = newValue
+	updateSliderPlacement(instance, ownerInstance, newValue.value)
+}
+
+// 设置滑点的位置
+function updateSliderPlacement(instance, ownerInstance, value, event) {
+	var state = instance.getState()
+	var mp = state.mp
+	if(mp.disabled) {
+		return
+	}
+
+	var percent = 0
+	if (mp.step > 1) {
+		// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
+		percent = Math.round(Math.max(mp.min, Math.min(value, mp.max)) / mp.step) * mp.step
+	} else {
+		// 当step=1时，无需跳步，充分利用wxs性能，滑块实时跟随手势，达到丝滑的效果
+		percent = Math.max(mp.min, Math.min(value, mp.max))
+	}
+	// 返回组件的实例
+	var gapInstance = ownerInstance.selectComponent('.u-slider__gap')
+	// 在移动期间，不允许transition动画，否则会造成卡顿
+	gapInstance[event === 'click' ? 'addClass' : 'removeClass']('u-slider__gap--ani')
+	// 调用逻辑层的方法，修改v-model绑定的值
+	ownerInstance.callMethod('updateValue', Math.round(percent))
+	if(event) {
+		ownerInstance.callMethod('emitEvent', {
+			event: event,
+			value: Math.round(percent)
+		})
+	}
+	
+	// 设置移动的值
+	gapInstance.requestAnimationFrame(function() {
+		gapInstance.setStyle({
+			width: percent / 100 * mp.width + 'px',
+		})
+	})
+}
+
+// 开始滑动
+function onTouchStart(e, ownerInstance) {
+	ownerInstance.callMethod('emitEvent', {
+		event: 'start', 
+		value: null
+	})
+}
+
+// 停止滑动
+function onTouchEnd(e, ownerInstance) {
+	ownerInstance.callMethod('emitEvent', {
+		event: 'end', 
+		value: null
+	})
+}
+
+// 获取当前手势点的X轴位移值
+function getTouchX(e) {
+	return e.touches[0].clientX
+}
+
+module.exports = {
+	onTouchStart: onTouchStart,
+	onTouchMove: onTouchMove,
+	onTouchEnd: onTouchEnd,
+	sizeReady: sizeReady,
+	onClick: onClick
+}

package/components/u-slider/nvue - /345/211/257/346/234/254.js"

@@ -0,0 +1,180 @@
+/**
+ * 使用bindingx方案实现slider
+ * 只能使用于nvue下
+ */
+// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
+const BindingX = uni.requireNativePlugin('bindingx')
+// nvue操作dom的库，用于获取dom的尺寸信息
+const dom = uni.requireNativePlugin('dom')
+// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
+const animation = uni.requireNativePlugin('animation')
+
+export default {
+	data() {
+		return {
+			// bindingx的回调值，用于取消绑定
+			panEvent: null,
+			// 标记是否移动状态
+			moving: false,
+			// 位移的偏移量
+			x: 0,
+			// 是否正在触摸过程中，用于标记动画类是否添加或移除
+			touching: false,
+			changeFromInside: false
+		}
+	},
+	watch: {
+		// 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
+		// 从服务端获取一个值后，赋值给slider的v-model而导致的
+		value(n) {
+			if (!this.changeFromInside) {
+				this.initX()
+			} else {
+				this.changeFromInside = false
+			}
+		}
+	},
+	mounted() {
+		this.init()
+	},
+	methods: {
+		init() {
+			this.getSliderRect()
+		},
+		// 获取节点信息
+		// 获取slider尺寸
+		getSliderRect() {
+			// 获取滑块条的尺寸信息
+			// 通过nvue的dom模块，查询节点信息
+			setTimeout(() => {
+				dom.getComponentRect(this.$refs['slider'], res => {
+					this.sliderRect = res.size
+					this.initX()
+				})
+			}, 10)
+		},
+		// 初始化按钮位置
+		initButtonStyle({
+			barStyle,
+			buttonWrapperStyle
+		}) {
+			this.barStyle = barStyle
+			this.buttonWrapperStyle = buttonWrapperStyle
+		},
+		emitEvent(event, value) {
+			this.$emit(event, value ? value : this.value)
+		},
+		formatStep(value) {
+			// 移动点占总长度的百分比
+			return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
+		},
+		// 滑动开始
+		onTouchStart(e) {
+			// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
+			e.stopPropagation && e.stopPropagation()
+			e.preventDefault && e.preventDefault()
+			if (this.moving || this.disabled) {
+				// 释放上一次的资源
+				if (this.panEvent?.token != 0) {
+					BindingX.unbind({
+						token: this.panEvent.token,
+						// pan为手势事件
+						eventType: 'pan'
+					})
+					this.gesToken = 0
+				}
+				return
+			}
+
+			this.moving = true
+			this.touching = true
+
+			// 获取元素ref
+			const button = this.$refs['nvue-button'].ref
+			const gap = this.$refs['nvue-gap'].ref
+
+			const {
+				min,
+				max,
+				step
+			} = this
+			const {
+				left,
+				width
+			} = this.sliderRect
+
+			// 初始值为本次偏移量x，加上次停止滑动时的结束值
+			let exporession = `(${this.x} + x)`
+			// 将偏移的x值，转为总位移的百分比值，为了和min和max进行判断
+			exporession = `(${exporession} / ${width}) * 100`
+			if (step > 1) {
+				// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
+				exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
+			} else {
+				// 当step=1时，无需跳步，充分利用bindingx性能，滑块实时跟随手势，达到丝滑的效果
+				exporession = `max(${min}, min(${exporession}, ${max}))`
+			}
+			// 将百分比最后转化为对应的px值
+			exporession = `${exporession} / 100 * ${width}`
+			// 最大值不允许超过轨迹的宽度
+			const {
+				sliderWidth
+			} = this.sliderRect
+			exporession = `min(${sliderWidth}, ${exporession})`
+			// 滑块点总是需要一个左偏移的值，为自身宽度的一半
+			const buttonExpression = `${exporession} - ${this.blockHeight / 2}`
+			// 阿里为了KPI而开源的BindingX
+			this.panEvent = BindingX.bind({
+				anchor: button,
+				eventType: 'pan',
+				props: [{
+					element: gap,
+					// 绑定width属性，设置其宽度值
+					property: 'width',
+					expression
+				}, {
+					element: button,
+					// 绑定width属性，设置其宽度值
+					property: 'transform.translateX',
+					expression: buttonExpression
+				}]
+			}, (e) => {
+				if (e.state === 'end' || e.state === 'exit') {
+					// 
+					this.x = uni.$u.range(0, left + width, e.deltaX + this.x)
+					// 根据偏移值，得出移动的百分比，进而修改双向绑定的v-model的值
+					const value = (this.x / width) * 100
+					const percent = this.formatStep(value)
+					// 修改value值
+					this.$emit('input', percent)
+					// 标记下一次触发value的watch时，这个值的变化，是由内部改变的
+					this.changeFromInside = true
+					this.moving = false
+					this.touching = false
+				}
+			})
+		},
+		// 从value的变化，倒推得出x的值该为多少
+		initX() {
+			const {
+				left,
+				width
+			} = this.sliderRect
+			// 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
+			// 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
+			this.x = this.value / 100 * width
+			// 设置移动的值
+			const barStyle = {
+				width: this.x + 'px'
+			}
+			// 按钮的初始值
+			const buttonWrapperStyle = {
+				transform: `translateX(${this.x - this.blockHeight / 2}px)`
+			}
+			this.initButtonStyle({
+				barStyle,
+				buttonWrapperStyle
+			})
+		}
+	}
+}