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

2021-09-05 17:04:07 阅读：497 来源： 互联网

标签：uniApp 自定义 deep important 组件小圆点 uniUi swiper

在用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,自定义,deep,important,组件,小圆点,uniUi,swiper
来源： https://blog.csdn.net/m0_57547956/article/details/120117563

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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