uniapp 实现 滑动切换 并且下方有小圆点

本文主要是介绍uniapp 实现 滑动切换 并且下方有小圆点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、页面布局 

	<view><swiper :indicator-dots="idtrue"><swiper-item v-for="(item,index) in userLst" :key="index" class="con"><view class="info"><block v-for="(items,ind) in item" :key="ind"><view class="scroll-tab-item" @click="toped(items.baseId)"style="text-align: center;"><img v-if="items.head && items.head !== ''":src="路径" alt="" class="imges"srcset="" /><view v-else :style="{backgroundColor: items.color }" class="userAuatard"@click="tops(items)">{{items.msg}}</view><span class="texting">{{items.chinese_name}}</span></view></block></view></swiper-item></swiper></view>

2、js中的data

	data() {return {userLst: [],idtrue: false,content：0}},

3、js中的方法

	getuserLst() {mine.getusList().then(res => {const data = res.datavar result = [];//数据10个放一页for (var i = 0; i < data.length; i += 10) {result.push(data.slice(i, i + 10));}this.content = result.lengththis.userLst = result//判断要是只有一页 就不显示圆点if (this.content > 1) {this.idtrue = true} else {this.idtrue = false}})},

这篇关于uniapp 实现 滑动切换 并且下方有小圆点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---