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.data
					var result = [];
                    //数据10个放一页
					for (var i = 0; i < data.length; i += 10) {
						result.push(data.slice(i, i + 10));
					}
					this.content = result.length
					this.userLst = result
                    //判断要是只有一页 就不显示圆点
					if (this.content > 1) {
						this.idtrue = true
					} else {
						this.idtrue = false
					}
				})
			},