From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
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 -->
+ <!-- 浠ヤ笂骞冲彴锛屾敮鎸亀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