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
}
})
},