本文主要是介绍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/小程序失效问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!