fusions-ui 1.2.7 → 1.2.8

package/components/fu-scroll-list/fu-scroll-list.vue

@@ -1,196 +0,0 @@
-<template>
-	<view ref="fu-scroll-list" class="fu-scroll-list">
-		<!-- #ifdef APP-NVUE -->
-		<!-- nvue使用bindingX实现，以得到更好的性能 -->
-		<scroller ref="fu-scroll-list__scroll-view" class="fu-scroll-list__scroll-view" scroll-direction="horizontal" :show-scrollbar="false"
-			:offset-accuracy="1" @scroll="nvueScrollHandler">
-			<view class="fu-scroll-list__scroll-view__content">
-				<slot />
-			</view>
-		</scroller>
-		<!-- #endif -->
-		<!-- #ifndef APP-NVUE -->
-		<!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
-		<!-- 以上平台，支持wxs -->
-		<scroll-view class="fu-scroll-list__scroll-view" scroll-x @scroll="wxs.scroll" @scrolltoupper="wxs.scrolltoupper" @scrolltolower="wxs.scrolltolower"
-			:data-scrollWidth="scrollWidth" :data-barWidth="pxFilter(indicatorBarWidth)" :data-indicatorWidth="pxFilter(indicatorWidth)"
-			:show-scrollbar="false" :upper-threshold="0" :lower-threshold="0">
-		<!-- #endif -->
-		<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
-		<!-- 非以上平台，只能使用普通js实现 -->
-		<scroll-view class="fu-scroll-list__scroll-view" scroll-x @scroll="scrollHandler" @scrolltoupper="scrolltoupperHandler" @scrolltolower="scrolltolowerHandler"
-			:show-scrollbar="false" :upper-threshold="0" :lower-threshold="0">
-		<!-- #endif -->
-			<view class="fu-scroll-list__scroll-view__content">
-				<slot />
-			</view>
-		</scroll-view>
-		<!-- #endif -->
-		
-		<!-- 指示灯 -->
-		<view class="fu-scroll-list__indicator" v-show="indicator">
-			<view class="fu-scroll-list__indicator__line" :style="[lineStyle]">
-				<view ref="fu-scroll-list__indicator__line__bar" class="fu-scroll-list__indicator__line__bar" :style="[barStyle]"></view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script src="./scrollWxs.wxs" module="wxs" lang="wxs"></script>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from "./props.js"
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom')
-	import nvueMixins from "./nvue.js"
-	// #endif
-	/**
-	 * ScrollList 横向滚动组件
-	 * @description 此组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
-	 * @property {String,Number} indicatorWidth 指示器的整体宽度 (默认 50 )
-	 * @property {String,Number} indicatorBarWidth 滑块的宽度 (默认 20 )
-	 * @property {Boolean} indicator = [true|false] 是否显示面板指示器 (默认 true )
-	 * @property {String} indicatorColor 指示器非激活颜色 (默认 '#f2f2f2' )
-	 * @property {String} indicatorActiveColor 指示器的激活颜色（默认 '#2979ff'）
-	 */
-	export default {
-		name:"FuScrollList",
-		// #ifdef APP-NVUE
-		mixins: [mpMixin, nvueMixins, props],
-		// #endif
-		// #ifndef APP-NVUE
-		mixins: [mpMixin, 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 = this.$fu.addUnit(this.indicatorBarWidth);
-				style.backgroundColor = this.indicatorActiveColor;
-				return style
-			},
-			// 指示器整体的样式，需要设置其宽度和背景色
-			lineStyle() {
-				return {
-					width: this.$fu.addUnit(this.indicatorWidth),
-					backgroundColor: this.indicatorColor
-				}
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				this.getComponentWidth()
-			},
-			
-			pxFilter(e) {
-				return this.$fu.getPx(e);
-			},
-			
-			// #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
-			// scroll-view触发滚动事件
-			scrollHandler(e) {
-				this.scrollInfo = e.detail;
-			},
-			
-			scrolltoupperHandler() {
-				this.scrollEvent('onLeft')
-				this.scrollInfo.scrollLeft = 0;
-			},
-			
-			scrolltolowerHandler() {
-				this.scrollEvent('onRight')
-				// 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
-				// 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
-				this.scrollInfo.scrollLeft = this.$fu.getPx(this.indicatorWidth) - this.$fu.getPx(this.indicatorBarWidth);
-			},
-			// #endif
-
-			scrollEvent(status) {
-				this.$emit(status)
-			},
-			
-			// 获取组件的宽度
-			async getComponentWidth() {
-				// 延时一定时间，以获取dom尺寸
-				await this.$fu.sleep(30)
-				// #ifndef APP-NVUE
-				let query = uni.createSelectorQuery().in(this);
-				query.select('.fu-scroll-list').boundingClientRect(data => {
-					// 拿到 scroll-view 组件宽度
-					this.scrollWidth = data.width
-				}).exec();
-				// #endif
-		
-				// #ifdef APP-NVUE
-				const ref = this.$refs['fu-scroll-list']
-				ref && dom.getComponentRect(ref, (res) => {
-					this.scrollWidth = res.size.width
-				})
-				// #endif
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
-	
-	.fu-scroll-list {
-		padding-bottom: 10px;
-	
-		&__scroll-view {
-			@include flex(row);
-	
-			&__content {
-				@include flex(row);
-			}
-		}
-	
-		&__indicator {
-			@include flex(row);
-			justify-content: center;
-			margin-top: 15px;
-	
-			&__line {
-				width: 60px;
-				height: 4px;
-				border-radius: 100px;
-				/* #ifndef APP-NVUE */
-				overflow: hidden;
-				/* #endif */
-	
-				&__bar {
-					width: 20px;
-					height: 4px;
-					border-radius: 100px;
-					background-color: $fu-primary;
-				}
-			}
-		}
-	}
-</style>

package/components/fu-scroll-list/nvue.js

@@ -1,28 +0,0 @@
-// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
-const BindingX = uni.requireNativePlugin('bindingx')
-
-export default {
-	methods: {
-		// 此处不写注释，请自行体会
-		nvueScrollHandler(e) {
-			const anchor = this.$refs['uy-scroll-list__scroll-view'].ref
-			const element = this.$refs['uy-scroll-list__indicator__line__bar'].ref
-			const scrollLeft = e.contentOffset.x
-			const contentSize = e.contentSize.width
-			const { scrollWidth } = this
-			const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
-			// 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
-			const actionNum = uni.$u.os() === 'ios' ? 2 : 1
-			const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
-			BindingX.bind({
-				anchor,
-				eventType: 'scroll',
-				props: [{
-						element,
-						property: 'transform.translateX',
-						expression
-				}]
-			})
-		}
-	}
-}

package/components/fu-scroll-list/props.js

@@ -1,43 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 指示器的整体宽度
-		 * @default 50
-		 */
-		indicatorWidth: {
-			type: [String, Number],
-			default: 50
-		},
-		/**
-		 * @description 滑块的宽度
-		 * @default 20
-		 */
-		indicatorBarWidth: {
-			type: [String, Number],
-			default: 20
-		},
-		/**
-		 * @description 是否显示面板指示器
-		 * @default true
-		 */
-		indicator: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 指示器非激活颜色
-		 * @default '#f2f2f2'
-		 */
-		indicatorColor: {
-			type: String,
-			default: '#f2f2f2'
-		},
-		/**
-		 * @description 指示器的激活颜色
-		 */
-		indicatorActiveColor: {
-			type: String,
-			default: ''
-		}
-	}
-}

package/components/fu-search/props.js

@@ -1,149 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description value / v-model 输入框初始值
-		 */
-		value: {
-			type: [String,Number],
-			default: ""
-		},
-		modelValue: {
-			type: [String,Number],
-			default: ""
-		},
-		/**
-		 * @description 占位提示文字
-		 * @default '搜索关键词'
-		 */
-		placeholder: {
-			type: String,
-			default: "搜索关键词"
-		},
-		/**
-		 * @description 搜索栏圆角
-		 * @default 5
-		 */
-		radius: {
-			type: [String,Number],
-			default: 5
-		},
-		/**
-		 * @description 输入最大长度
-		 * @default 150
-		 */
-		maxlength: {
-			type: [String,Number],
-			default: 150
-		},
-		/**
-		 * @description 是否显示清除按钮
-		 * @values 'always' - 一直显示, 'auto' - 输入框不为空时显示, 'none' - 一直不显示
-		 * @default 'auto'
-		 */
-		clearabled: {
-			type: String,
-			default: "auto"
-		},
-		/**
-		 * @description 输入框背景颜色
-		 * @default '#F8F8F8'
-		 */
-		bgColor: {
-			type: String,
-			default: '#F8F8F8'
-		},
-		/**
-		 * @description 是否自动聚焦
-		 * @default false
-		 */
-		focus: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 只读，不能有任何操作，只做展示
-		 * @default false
-		 */
-		readonly: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否显示右侧控件
-		 * @default true
-		 */
-		showAction: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 右侧控件的样式，对象形式
-		 */
-		actionStyle: {
-			type: Object,
-			default: () => ({})
-		},
-		/**
-		 * @description 右侧控件文字
-		 * @default '搜索'
-		 */
-		actionText: {
-			type: String,
-			default: '搜索'
-		},
-		/**
-		 * @description input输入框的样式，可以定义文字颜色，大小等，对象形式
-		 */
-		inputStyle: {
-			type: [String,Object],
-			default: () => ({})
-		},
-		/**
-		 * @description 左边的图标，可以为Icon图标名称
-		 * @default 'magnifier'
-		 */
-		searchIcon: {
-		    type: String,
-		    default: 'magnifier'
-		},
-		/**
-		 * @description 左边的图标大小
-		 * @default 18
-		 */
-		searchIconSize: {
-		    type: [String,Number],
-		    default: 18
-		},
-		/**
-		 * @description 左边图标的颜色
-		 * @default '#c0c4cc'
-		 */
-		searchIconColor: {
-		    type: String,
-		    default: '#c0c4cc'
-		},
-		/**
-		 * @description 输入框对齐方式
-		 * @default 'center'
-		 */
-		inputAlign: {
-			type: String,
-			default: 'center'
-		},
-		/**
-		 * @description 设置高度
-		 * @default 36
-		 */
-		height: {
-			type: [String,Number],
-			default: 36
-		},
-		/**
-		 * @description 输入框字体颜色
-		 */
-		color: {
-			type: String,
-			default: ''
-		}
-	}
-}

package/components/fu-section/props.js

@@ -1,59 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 标题装饰类型
-		 * @values 'line' - 竖线, 'circle' - 圆形, 'square' - 正方形
-		 */
-		mode: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 主标题
-		 */
-		title: {
-			type: String,
-			required: true,
-			default: ''
-		},
-		/**
-		 * @description 主标题字体大小
-		 * @default 14
-		 */
-		titleSize: {
-			type: [String,Number],
-			default: 14
-		},
-		/**
-		 * @description 主标题字体颜色
-		 * @default '#333333'
-		 */
-		titleColor: {
-			type: String,
-			default: '#333333'
-		},
-		/**
-		 * @description 副标题
-		 */
-		subTitle: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 副标题字体大小
-		 * @default 12
-		 */
-		subTitleSize: {
-			type: [String,Number],
-			default: 12
-		},
-		/**
-		 * @description 副标题字体颜色
-		 * @default '#999999'
-		 */
-		subTitleColor: {
-			type: String,
-			default: '#999999'
-		}
-	}
-}