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-swiper/u-swiper.vue | 255 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 255 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-swiper/u-swiper.vue b/uni_modules/uview-ui/components/u-swiper/u-swiper.vue new file mode 100644 index 0000000..0cfb229 --- /dev/null +++ b/uni_modules/uview-ui/components/u-swiper/u-swiper.vue @@ -0,0 +1,255 @@ +<template> + <view + class="u-swiper" + :style="{ + backgroundColor: bgColor, + height: $u.addUnit(height), + borderRadius: $u.addUnit(radius) + }" + > + <view + class="u-swiper__loading" + v-if="loading" + > + <u-loading-icon mode="circle"></u-loading-icon> + </view> + <swiper + v-else + class="u-swiper__wrapper" + :style="{ + height: $u.addUnit(height), + }" + @change="change" + :circular="circular" + :interval="interval" + :duration="duration" + :autoplay="autoplay" + :current="current" + :currentItemId="currentItemId" + :previousMargin="$u.addUnit(previousMargin)" + :nextMargin="$u.addUnit(nextMargin)" + :acceleration="acceleration" + :displayMultipleItems="displayMultipleItems" + :easingFunction="easingFunction" + > + <swiper-item + class="u-swiper__wrapper__item" + v-for="(item, index) in list" + :key="index" + > + <view + class="u-swiper__wrapper__item__wrapper" + :style="[itemStyle(index)]" + > + <!-- ���nvue������image���������������������������������������������������flex:1��������������������������������������������������� --> + <image + class="u-swiper__wrapper__item__wrapper__image" + v-if="getItemType(item) === 'image'" + :src="getSource(item)" + :mode="imgMode" + @tap="clickHandler(index)" + :style="{ + height: $u.addUnit(height), + borderRadius: $u.addUnit(radius) + }" + ></image> + <video + class="u-swiper__wrapper__item__wrapper__video" + v-if="getItemType(item) === 'video'" + :id="`video-${index}`" + :enable-progress-gesture="false" + :src="getSource(item)" + :poster="getPoster(item)" + :title="showTitle && $u.test.object(item) && item.title ? item.title : ''" + :style="{ + height: $u.addUnit(height) + }" + controls + @tap="clickHandler(index)" + ></video> + <text + v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))" + class="u-swiper__wrapper__item__wrapper__title u-line-1" + >{{ item.title }}</text> + </view> + </swiper-item> + </swiper> + <view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]"> + <slot name="indicator"> + <u-swiper-indicator + v-if="!loading && indicator && !showTitle" + :indicatorActiveColor="indicatorActiveColor" + :indicatorInactiveColor="indicatorInactiveColor" + :length="list.length" + :current="currentIndex" + :indicatorMode="indicatorMode" + ></u-swiper-indicator> + </slot> + </view> + </view> +</template> + +<script> + import props from './props.js'; + /** + * Swiper ��������� + * @description ���������������������������������������������������������,������������������ + * @tutorial https://www.uviewui.com/components/swiper.html + * @property {Array} list ��������������� + * @property {Boolean} indicator ������������������������������������ false ��� + * @property {String} indicatorActiveColor ��������������������������������� '#FFFFFF' ��� + * @property {String} indicatorInactiveColor ��������������������������������� 'rgba(255, 255, 255, 0.35)' ��� + * @property {String | Object} indicatorStyle ���������������������������bottom���left���right������������ + * @property {String} indicatorMode ������������������������ 'line' ��� + * @property {Boolean} autoplay ��������������������������� true ��� + * @property {String | Number} current ��������������������� index��������� 0 ��� + * @property {String} currentItemId ��������������������� item-id ������������ current ��������������� + * @property {String | Number} interval ���������������������������������ms������������ 3000 ��� + * @property {String | Number} duration ���������������������������������ms������������ 300 ��� + * @property {Boolean} circular ��������������������������������������������������� false ��� + * @property {String | Number} previousMargin ������������������������������������������������������nvue������������������������������ 0 ��� + * @property {String | Number} nextMargin ������������������������������������������������������nvue������������������������������ 0 ��� + * @property {Boolean} acceleration ��������������������������������������������������������������������������������������� false ��� + * @property {Number} displayMultipleItems ������������������������������nvue��������������������������������������� 1 ��� + * @property {String} easingFunction ������swiper��������������������������� ������������������������������������ 'default' ��� + * @property {String} keyName list������������������������������������������������ 'url' ��� + * @property {String} imgMode ������������������������������ 'aspectFill' ��� + * @property {String | Number} height ��������������������� 130 ��� + * @property {String} bgColor ��������������������� '#f3f4f6' ��� + * @property {String | Number} radius ������������������������������������������������������ 4 ��� + * @property {Boolean} loading ������������������������ false ��� + * @property {Boolean} showTitle ���������������������������������������������title��������������� false ��� + * @event {Function(index)} click ������������������������ index���������������������������������0������ + * @event {Function(index)} change ������������������������(������������������������) index������������������������������������0������ + * @example <u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper> + */ + export default { + name: 'u-swiper', + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + currentIndex: 0 + } + }, + watch: { + current(val, preVal) { + if(val === preVal) return; + this.currentIndex = val; // ������������������������ + } + }, + computed: { + itemStyle() { + return index => { + const style = {} + // #ifndef APP-NVUE || MP-TOUTIAO + // ������������������������������������nvue��������� + // ������������������������������������������������������������������ + if (this.nextMargin && this.previousMargin) { + style.borderRadius = uni.$u.addUnit(this.radius) + if (index !== this.currentIndex) style.transform = 'scale(0.92)' + } + // #endif + return style + } + } + }, + methods: { + getItemType(item) { + if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image' + if (typeof item === 'object' && this.keyName) { + if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image' + if (item.type === 'image') return 'image' + if (item.type === 'video') return 'video' + return 'image' + } + }, + // ������������������������������������������������������������������������������������������������������������keyName + getSource(item) { + if (typeof item === 'string') return item + if (typeof item === 'object' && this.keyName) return item[this.keyName] + else uni.$u.error('������������������������������') + return '' + }, + // ������������������ + change(e) { + // ��������������������� + const { + current + } = e.detail + this.pauseVideo(this.currentIndex) + this.currentIndex = current + this.$emit('change', e.detail) + }, + // ������������������������������������ + pauseVideo(index) { + const lastItem = this.getSource(this.list[index]) + if (uni.$u.test.video(lastItem)) { + // ��������������������������������� + const video = uni.createVideoContext(`video-${index}`, this) + video.pause() + } + }, + // ���������������item��������������������������������������� + getPoster(item) { + return typeof item === 'object' && item.poster ? item.poster : '' + }, + // ������������item + clickHandler(index) { + this.$emit('click', index) + } + }, + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-swiper { + @include flex; + justify-content: center; + align-items: center; + position: relative; + overflow: hidden; + + &__wrapper { + flex: 1; + + &__item { + flex: 1; + + &__wrapper { + @include flex; + position: relative; + overflow: hidden; + transition: transform 0.3s; + flex: 1; + + &__image { + flex: 1; + } + + &__video { + flex: 1; + } + + &__title { + position: absolute; + background-color: rgba(0, 0, 0, 0.3); + bottom: 0; + left: 0; + right: 0; + font-size: 28rpx; + padding: 12rpx 24rpx; + color: #FFFFFF; + flex: 1; + } + } + } + } + + &__indicator { + position: absolute; + bottom: 10px; + } + } +</style> -- Gitblit v1.8.0