From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +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