uni-app u-swiper 自定义选中样式

inzv520

已于 2024-07-11 10:34:33 修改

阅读量461

点赞数 4

分类专栏： uniapp uview 文章标签： vue css

于 2024-07-11 10:25:44 首次发布

本文链接：https://blog.csdn.net/inzv520/article/details/140344235

版权

uniapp 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

uview

1 篇文章 0 订阅

订阅专栏

uni-app u-swiper 自定义选中样式

第一步：修改uview组件中的源码 /uni_modules/uview-ui/components/u-swiper/u-swiper.vue

current ：是当前轮播图的索引，只需要将当前索引和数组的索引做一下区分

			<swiper-item
				class="u-swiper__wrapper__item"
				v-for="(item, index) in list"
				:key="index"
			>
			<-- 通过current 将当前索引和数组索引区别开，添加isactive选中样式 -->
				<view
					:class="current == index ? 'u-swiper__wrapper__item__wrapper_isactive':'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>

复制一份原始的css样式就好
在这里插入图片描述

第二步：自定义组件使用

组件photoDetail.vue需要用到复制粘贴即可

template 部分

			<-- template 部分 -->
			<view class="detailList">
				<u-swiper :current="currenttop" :autoplay="false" previousMargin="120" next-margin="147" height="120"
				:list="params.detailFileUrlList" @change="changeCurrent"></u-swiper>
			</view>

js部分

		//js部分
		changeCurrent(row) {
				this.currenttop = row.current
		},

css部分

	//css部分
	.detailList {
		.u-swiper__wrapper__item__wrapper {
			border: none;
		}

		.u-swiper__wrapper__item__wrapper_isactive {
			border: 2px solid #D9D9D9 !important;
		}
	}