实现功能如下图：(索引列表加头像和选择框，选择好的好友在顶部展示出来)
首先引入uview里面的索引列表组件：(用于展示好友列表)
<view class="" style="width: 700rpx;margin: 0 auto;">
<u-index-list :index-list="indexList" @select="selectFn" activeColor="#c0c0c0">
<template v-for="(item, index) in itemArr" bgColor="#fff">
<!-- #ifdef APP-NVUE -->
<u-index-anchor :text="indexList[index]" bgColor="#fff"></u-index-anchor>
<!-- #endif -->
<u-index-item bgColor="#fff">
<!-- #ifndef APP-NVUE -->
<u-index-anchor :text="indexList[index]" bgColor="#fff"></u-index-anchor>
<!-- #endif -->
<view class="list-cell" v-for="(item1, index1) in item" bgColor="#fff">
<u-checkbox-group>
<u-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" @change="change(item1)">
</u-checkbox>
</u-checkbox-group>
<view class="">
<img :src="item1.avatar" alt=""
style="width: 90rpx;height: 90rpx;border-radius: 50%;margin-right: 20rpx;">
</view>
<view class="">
{{item1.friendNote}}
</view>
</view>
</u-index-item>
</template>
</u-index-list>
</view>
当点击选择请前面的选择框时，触发change事件（组件内方法）：
change(e) {
console.log(e)
//新建userlist和userlistimg空数组，将返回值push进去
this.userlist.push(e.friendId);
this.userlistimg.push(e.avatar);
// userlistimg
// console.log(this.userlist)
//删除数组中重复的元素（昵称和头像）
for (var i = 0; i < this.userlist.length; i++) {
for (var j = i + 1; j < this.userlist.length; j++) {
if (this.userlist[i] == this.userlist[j]) { //第一个等同于第二个，
splice方法删除第二个
// this.userlist.splice(j, 1);this.$delete(this.userlist, j)
this.$delete(this.userlist, i)
j--;
}
}
}
for (var i = 0; i < this.userlistimg.length; i++) {
for (var j = i + 1; j < this.userlistimg.length; j++) {
if (this.userlistimg[i] == this.userlistimg[j]) { //第一个等同于第二
个，splice方法删除第二个
// this.userlist.splice(j, 1);
this.$delete(this.userlistimg, j)
this.$delete(this.userlistimg, i)
j--;
}
}
}this.listimg = this.userlistimg
console.log(this.userlistimg) //打印处理后的数组
},
上面的顶部展示出来用的是uniapp的scroll-view：
<view class="topline">
<view class="">
<scroll-view class="typeScroll" scroll-x="true" @scroll="scroll" scroll-left="10">
<!-- <view v-for="(item,index) in 5" :key="index" class="sceneItem1">
拉取
</view> -->
<img :src="item" alt="" class="Scrollimg" v-for="(item,index) in listimg" :key="index" >
//此处循环的数组就是上面代码中处理好的头像数组
<!-- <view id="demo1" v-for="item in 32" class="sceneItem1">A</view> -->
</scroll-view>
</view>
<view class="xinshan-topR" @click="confirm">
确定
</view>
</view>
其中class类的展示如下：
.topline {
width: 690rpx;
margin: 0 auto;
// background-color: pink;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.xinshan-topR {
width: 138rpx;
height: 50rpx;
background: #F2853C;
border-radius: 4rpx;
opacity: 1;
font-size: 28rpx;
font-weight: normal;
color: #FFFFFF;
text-align: center;
line-height: 50rpx;
}
.typeScroll {
// margin-left: 40rpx;
margin-bottom: 30rpx;
width: 500rpx;
// background: #e7e7e7;
white-space: nowrap;
margin-top: 36rpx;.Scrollimg {
display: inline-block;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 10rpx;
}.sceneItem1 {
display: inline-block;
// width: 22%;
// margin-left: 44rpx;
margin-right: 20rpx;
text-align: center;
// min-height: 38rpx;
width: 126rpx;
height: 64rpx;
background: #00B578;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
font-size: 28rpx;
line-height: 64rpx;
font-weight: 500;
color: #FFFFFF;}
.sceneItem2 {
display: inline-block;
// width: 22%;
margin-left: 44rpx;
text-align: center;
// min-height: 38rpx;
width: 126rpx;
height: 64rpx;
background: #FAFAFA;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
font-size: 28rpx;
line-height: 64rpx;
font-weight: 500;
color: #9B9B9B;}
}
（下面是data里面的数据）：
return {value: "",listimg: [// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",// "https://cdn.uviewui.com/uview/album/2.jpg",],list: [{"letter": "A","data": [/* {name: "哈苏觉得会爱上",avatar: "https://cdn.uviewui.com/uview/album/2.jpg"}, */"https://cdn.uviewui.com/uview/album/2.jpg","包头机场","北海福成机场","北京南苑机场","北京首都国际机场"]}, {"letter": "B","data": ["保山机场","包头机场","北海福成机场","北京南苑机场","北京首都国际机场"]}],userlist: [],userlistimg: [],indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S","T", "U", "V", "W", "X", "Y", "Z", "#"],test: [],itemArr: [[{name: "过一组1",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费2",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费3",url: "https://cdn.uviewui.com/uview/album/1.jpg"},],[{name: "过一组4",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费5",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费6",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费7",url: "https://cdn.uviewui.com/uview/album/1.jpg"},],[{name: "过一组8",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费9",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费10",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费11",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费12",url: "https://cdn.uviewui.com/uview/album/1.jpg"}],[{name: "过一组13",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "水电费14",url: "https://cdn.uviewui.com/uview/album/1.jpg"},{name: "333",url: "https://cdn.uviewui.com/uview/album/1.jpg"},],],}
