From 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 01 Nov 2023 16:07:03 +0800
Subject: [PATCH] fix:小程序分享功能和秒级数据

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

diff --git a/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue b/uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue
new file mode 100644
index 0000000..4fe885a
--- /dev/null
+++ b/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 -->
+		<!-- ���������������������wxs -->
+		<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 -->
+			<!-- ������������������������������������js������ -->
+			<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���left���right������������
+ * @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
+			// ������������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 = 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')
+			// ���������js���������������������������������������������this.scrollInfo������������������������������������
+			// ���������������������computed������������������������������������������������������
+			this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
+		},
+		// #endif
+		//
+		scrollEvent(status) {
+			this.$emit(status)
+		},
+		// ���������������������
+		async getComponentWidth() {
+			// ������������������������������dom������
+			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.8.0