feat: 幻灯片样式调整

mini/uni_modules/uview-ui/components/u-swiper/u-swiper.vue

@@ -1,97 +1,97 @@
 <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="$u.test.image(getSource(item))"
-						: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="$u.test.video(getSource(item))"
-						: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>
+  <view
+    class="u-swiper"
+    :style="{
+      backgroundColor: bgColor,
+      height: $u.addUnit(height),
+      borderRadius: $u.addUnit(radius)
+    }"
+  >
+    <view
+      v-if="loading"
+      class="u-swiper__loading"
+    >
+      <u-loading-icon mode="circle" />
+    </view>
+    <swiper
+      v-else
+      class="u-swiper__wrapper"
+      :style="{
+        height: $u.addUnit(height),
+      }"
+      :circular="circular"
+      :interval="interval"
+      :duration="duration"
+      :autoplay="autoplay"
+      :current="current"
+      :current-item-id="currentItemId"
+      :previous-margin="$u.addUnit(previousMargin)"
+      :next-margin="$u.addUnit(nextMargin)"
+      :acceleration="acceleration"
+      :display-multiple-items="displayMultipleItems"
+      :easing-function="easingFunction"
+      @change="change"
+    >
+      <swiper-item
+        v-for="(item, index) in list"
+        :key="index"
+        class="u-swiper__wrapper__item"
+      >
+        <view
+          class="u-swiper__wrapper__item__wrapper"
+          :style="[itemStyle(index)]"
+        >
+          <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
+          <image
+            v-if="$u.test.image(getSource(item))"
+            class="u-swiper__wrapper__item__wrapper__image"
+            :src="getSource(item)"
+            :mode="imgMode"
+            :style="{
+              height: $u.addUnit(height),
+              borderRadius: $u.addUnit(radius)
+            }"
+            @tap="clickHandler(index)"
+          />
+          <video
+            v-if="$u.test.video(getSource(item))"
+            :id="`video-${index}`"
+            class="u-swiper__wrapper__item__wrapper__video"
+            :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)"
+          />
+          <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"
+          :indicator-active-color="indicatorActiveColor"
+          :indicator-inactive-color="indicatorInactiveColor"
+          :length="list.length"
+          :current="currentIndex"
+          :indicator-mode="indicatorMode"
+        />
+      </slot>
+    </view>
+  </view>
 </template>
 
 <script>
-	import props from './props.js';
-	/**
+import props from './props.js'
+/**
 	 * Swiper 轮播图
 	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
 	 * @tutorial https://www.uviewui.com/components/swiper.html
@@ -123,73 +123,73 @@
 	 * @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: {
-			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名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)
-			}
-		},
-	}
+export default {
+  name: 'USwiper',
+  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+  data() {
+    return {
+      currentIndex: 0
+    }
+  },
+  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
+      }
+    }
+  },
+  watch: {
+    current(val, preVal) {
+      if (val === preVal) return
+      this.currentIndex = val // 和上游数据关联上
+    }
+  },
+  methods: {
+    // 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名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>
@@ -204,9 +204,11 @@
 
 		&__wrapper {
 			flex: 1;
+      background: #151729;
 
 			&__item {
 				flex: 1;
+        background: #151729;
 
 				&__wrapper {
 					@include flex;
@@ -214,6 +216,7 @@
 					overflow: hidden;
 					transition: transform 0.3s;
 					flex: 1;
+          background: #151729;
 
 					&__image {
 						flex: 1;