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