uni-app swiper组件的indicator-dots设置无效
uni-app swiper组件的indicator-dots设置无效
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 12.3.1 | HBuilderX |
bug描述：
1、swiper组件的indicator-dots设置无效，会一直显示
2、mp-html插件无法使用
3、这个问题不知道怎么描述，如下图
<scroll-view class="nav" scroll-y="false" scroll-x="true" show-scrollbar="false">
<view class="nav-item" v-for="(item,index) in nav" :key="item.id" @click="switchNav(item.id)" :class="item.id === category_id ? 'active' : ''">
<text class="nav-item-text">{{item.name}}</text>
</view>
</scroll-view>
<style>
.nav{
flex-direction: row;
width: 750rpx;
padding: 25rpx;
}
.nav-item{
height: 60rpx;
padding: 20rpx;
justify-content: center;
align-items: center;
}
.nav-item-text{
font-size: 28rpx;
color: #333333;
}
.nav-item.active{
background-color: #0c86ff;
border-radius: 10rpx;
}
.nav-item.active .nav-item-text{
color: #FFFFFF;
font-size: 28rpx;
}
</style>
1 回复
在 uni-app 中使用 swiper 组件时，indicator-dots 属性用于控制是否展示轮播图的小圆点指示器。如果你发现 indicator-dots 设置无效，可能是以下几个原因导致的：
1. 确保 indicator-dots 属性正确设置
请确认你在 swiper 组件中正确设置了 indicator-dots 属性，并且其值为布尔类型 true 或 false。
<swiper indicator-dots="true">
<swiper-item>
<view class="swiper-item">内容1</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">内容2</view>
</swiper-item>
</swiper>2. 确保 swiper 组件包裹内容正确
swiper 组件必须包含 swiper-item 子组件，否则 indicator-dots 可能不会生效。
<swiper indicator-dots="true">
<swiper-item>
<view class="swiper-item">内容1</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">内容2</view>
</swiper-item>
</swiper>3. 检查样式冲突
有时候自定义样式可能会影响 indicator-dots 的显示。确保没有样式覆盖了默认的指示器样式。
/* 确保没有覆盖指示器的样式 */
.swiper-indicator {
display: block !important;
}4. 检查 uni-app 版本
某些 uni-app 版本可能存在 bug，导致 indicator-dots 属性无效。尝试更新 uni-app 到最新版本，或者查看是否有相关的 bug 修复。
5. 检查运行环境
indicator-dots 属性在不同平台（如微信小程序、H5、App）下的表现可能有所不同。确保你测试的平台支持该属性。
6. 使用 indicator-color 和 indicator-active-color 进一步自定义
你可以通过 indicator-color 和 indicator-active-color 属性自定义指示器的颜色，确保它们与背景颜色形成对比，以便看到指示器。
<swiper indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#000000">
<swiper-item>
<view class="swiper-item">内容1</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">内容2</view>
</swiper-item>
</swiper>