uniApp uniUi组件重写样式/deep/小程序失效问题

本文主要是介绍uniApp uniUi组件重写样式/deep/小程序失效问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在用uniUi轮播图组件时想自定义下面的小圆点组件但是/deep/在h5有效到了小程序就失效了

各种办法都试过了 比如important、options:{stylexxxxxx} 都是只有h5/deep/生效而小程序失效

最后我选择使用uniUi另外一个组件 uni-swiper-dot 自定义小圆点 用swiper的chang事件来控制小圆点的显示

然后/deep/修改这个小圆点的样式达到目的 但是发现这个组件也不支持定义宽和高 没办法 只能找到这个组件 给item 加了我自己自定义的class 解决了。


html ->

<uni-swiper-dot   :dotsStyles="{backgroundColor:'#F5F5F5',selectedBackgroundColor:'#FFDD00',bottom:'18'}" class="swiper-dot" :info="dataList" :current="current" field="content" mode="default">
			<swiper @change="GetSwiperIndex"  indicator-active-color="#FFDD00" class="white-box-swiper" :indicator-dots="false" :autoplay="false"
				:interval="3000" :duration="1000">
				<swiper-item v-for="item,index of dataList" :key="index">
					<view class="swiper-item">
						<view class="card-box-main mg-X">
							<view class="card-box-item" v-for="(xitem,xindex) of item" :key="xindex">
								<image class="card-image" :src="xitem.icon"></image>
								<view class="card-box-text">{{xitem.title}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>


css-> 


.swiper-dot,.white-box-swiper{
		overflow: visible!important;
	}
	.uni-swiper__warp{
		overflow: visible!important;
	}  
	/deep/.uni-swiper__dots-item{
		width: 30rpx!important; //发现不写这个h5会失效
	}
	.zdy-class-dot{ 
		width: 30rpx!important; 
	}

组件源码中 ->
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
			 :key="index" class="uni-swiper__dots-item  uni-swiper__dots-bar /*这里是我自定义的class*/ zdy-class-dot"  />
		</view>


最后总算是解决了这个小bug 。

这篇关于uniApp uniUi组件重写样式/deep/小程序失效问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！