From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序

---
 minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue |  224 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 224 insertions(+), 0 deletions(-)

diff --git a/minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue b/minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue
new file mode 100644
index 0000000..4fe885a
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue
@@ -0,0 +1,224 @@
+<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 -->
+		<!-- 浠ヤ笂骞冲彴锛屾敮鎸亀xs -->
+		<scroll-view
+			class="u-scroll-list__scroll-view"
+			scroll-x
+			@scroll="wxs.scroll"
+			@scrolltoupper="wxs.scrolltoupper"
+			@scrolltolower="wxs.scrolltolower"
+			:data-scrollWidth="scrollWidth"
+			:data-barWidth="$u.getPx(indicatorBarWidth)"
+			:data-indicatorWidth="$u.getPx(indicatorWidth)"
+			:show-scrollbar="false"
+			:upper-threshold="0"
+			:lower-threshold="0"
+		>
+			<!-- #endif -->
+			<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
+			<!-- 闈炰互涓婂钩鍙帮紝鍙兘浣跨敤鏅�歫s瀹炵幇 -->
+			<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"
+			>
+				<!-- #endif -->
+				<view class="u-scroll-list__scroll-view__content">
+					<slot />
+				</view>
+			</scroll-view>
+			<!-- #endif -->
+			<view
+				class="u-scroll-list__indicator"
+				v-if="indicator"
+				:style="[$u.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://www.uviewui.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锛宭eft锛宺ight杩涜瀹氫綅
+ * @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.js';
+export default {
+	name: 'u-scroll-list',
+	mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+	// #ifdef APP-NVUE
+	mixins: [uni.$u.mpMixin, uni.$u.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
+			// 姝や负鏅�歫s鏂规锛屽彧鏈夊湪闈瀗vue鍜屼笉鏀寔wxs鏂规鐨勭鎵嶄娇鐢ㄣ��
+			// 姝ゅ鐨勮绠楃悊鐢变负锛歴croll-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 = uni.$u.addUnit(this.indicatorBarWidth)
+			style.backgroundColor = this.indicatorActiveColor
+			return style
+		},
+		lineStyle() {
+			const style = {}
+			// 鎸囩ず鍣ㄦ暣浣撶殑鏍峰紡锛岄渶瑕佽缃叾瀹藉害鍜岃儗鏅壊
+			style.width = uni.$u.addUnit(this.indicatorWidth)
+			style.backgroundColor = this.indicatorColor
+			return style
+		}
+	},
+	mounted() {
+		this.init()
+	},
+	methods: {
+		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')
+			// 鍦ㄦ櫘閫歫s鏂规涓紝婊氬姩鍒板彸杈规椂锛岄�氳繃璁剧疆this.scrollInfo锛屾ā鎷熷嚭婊氬姩鍒板彸杈圭殑鎯呭喌
+			// 鍥犱负涓婃柟鏄敤杩嘽omputed璁＄畻鐨勶紝璁剧疆鍚庯紝浼氳嚜鍔ㄨ皟鏁存粦鍧楃殑浣嶇疆
+			this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
+		},
+		// #endif
+		//
+		scrollEvent(status) {
+			this.$emit(status)
+		},
+		// 鑾峰彇缁勪欢鐨勫搴�
+		async getComponentWidth() {
+			// 寤舵椂涓�瀹氭椂闂达紝浠ヨ幏鍙杁om灏哄
+			await uni.$u.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 lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.u-scroll-list {
+	padding-bottom: 10px;
+
+	&__scroll-view {
+		@include flex;
+
+		&__content {
+			@include flex;
+		}
+	}
+
+	&__indicator {
+		@include flex;
+		justify-content: center;
+		margin-top: 15px;
+
+		&__line {
+			width: 60px;
+			height: 4px;
+			border-radius: 100px;
+			overflow: hidden;
+
+			&__bar {
+				width: 20px;
+				height: 4px;
+				border-radius: 100px;
+			}
+		}
+	}
+}
+</style>

--
Gitblit v1.9.3