小程序 仿通讯录列表

我是封装了一个组件 用户的头像 和用户列表用到了2个接口 字母用的是vantaui

<van-index-bar :sticky="false">
  <view wx:for="{{anchorList}}" wx:for-index="wordIndex" wx:key="wordIndex" wx:for-item='wordItem'>
    <view wx:if="{{customers[wordItem]}}" class="flex_row main_axis_space_between second_axis_center">
      <van-index-anchor :use-slot="true" index='{{wordItem?wordItem:"#"}}' class="indexAnchor">
      </van-index-anchor>
      <text class="text_number" wx:if="{{wordIndex == 0}}">客户通讯录 (共{{statistical.total}}人)</text>
    </view>
    <view wx:for="{{customers[wordItem]}}" wx:key="index" class="employeeName flex_row second_axis_center"
      bindtap="customersData" data-userid="{{item.customerUserId}}" data-corpuserid="{{item.corpUserId}}">
      <image src="{{item.headerImg}}" style="width:80rpx;height:80rpx;border-radius: 50rpx;" mode="aspectFit"
        class="image_header"></image>
      <view style="flex:1">
        <view class="text_name">{{item.directoryName}}
          <text class="text_classify">@{{item.channelName}}</text>
          <image src="https://static.pixiaomiao.com/sale-cloud/images/icon_costomerltem2.png"
            style="width:30rpx;height:30rpx;margin-left:10rpx;" mode="aspectFit"
            wx:if="{{item.membershipLevelId == 1}}"></image>
          <image style="width:30rpx;height:30rpx;margin-left:10rpx;" mode="aspectFit"
            wx:if="{{item.membershipLevelId == 0}}"></image>
          <image src="https://static.pixiaomiao.com/sale-cloud/images/icon_costomerltem2_two.png"
            style="width:30rpx;height:30rpx;margin-left:10rpx;" mode="aspectFit"
            wx:if="{{item.membershipLevelId == 2}}"></image>
            <image src="https://static.pixiaomiao.com/sale-cloud/images/icon_costomerltem2_three.png"
            style="width:30rpx;height:30rpx;margin-left:10rpx;" mode="aspectFit"
            wx:if="{{item.membershipLevelId == 3}}"></image>
            <image src="https://static.pixiaomiao.com/sale-cloud/images/icon_costomerltem2_four.png"
            style="width:30rpx;height:30rpx;margin-left:10rpx;" mode="aspectFit"
            wx:if="{{item.membershipLevelId == 4}}"></image>
        </view>
        <view style="display:flex;align-items:center;">
          <text class="text_serve">服务人员：</text>
          <image wx:for="{{item.memberIdArray}}" wx:key="index" wx:for-item="memberIdItem"
            src="{{members[memberIdItem].headerImg}}"
            style="width:40rpx;height:40rpx;margin-left:2rpx;border-radius: 50rpx;margin-left:10rpx;margin-top: 14rpx;"
            mode="aspectFit"></image>
        </view>
      </view>
      <view>
        <view class="text_phone">{{item.phone}}</view>
        <view class="text_beformtime">
          最近活跃: {{item.refreshTime}}
        </view>
      </view>
      <view>
        <image src="https://static.pixiaomiao.com/sale-cloud/images/icon_arrow_right_gray.png"
          style="width:16rpx;height:28rpx;margin:0rpx 26rpx 0rpx 12rpx" mode="aspectFit"></image>
      </view>

    </view>
  </view>
</van-index-bar>

<view class="view_image" wx:if="{{customerList.length ==0 &&!isLoading}}">
   <van-empty
  image="https://static.pixiaomiao.com/sale-cloud/images/customer_search_no.png"
  description="暂无符合条件的客户"
  />
</view>

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    anchorList: { //字母
      type: Array
    },
    customers: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    anchorList: [],
    active: false,
    customerList: [],
    statistical: []
  },
  // 使用全局样式
  options: {
    addGlobalClass: true
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadData: async function (queryObject) {
      // console.log(this.properties.pagenum)
      // 在组件实例进入页面节点树时执行
      const memberRepData = await apiLoadMemberList();
      if (memberRepData.code == 0) {
        let members = {};
        memberRepData.data.forEach((item) => {
          members[item.userId] = item
          // console.log(item)
        })

        // console.log(members)
        this.setData({
          members
        })
      }
      const repData = await apiLoadCustomers(
        this.data.pagenum,
        false,
        -1,
        '',
        queryObject
      )
      if (repData.code == 0) {
        let customers = {};
        repData.data.list.forEach((item) => {
          item.memberIdArray = item.memberIdStr.split(',');
          let firstWord = pinyin.getFirstLetter(item.directoryName).substring(0, 1); //客户名字首字母
          if (customers[firstWord]) {
            customers[firstWord].push(item)
          } else {
            customers[firstWord] = [item]
          }
          item.refreshTime = formatDateToStr(item.refreshTime, '前')
        })
        if (this.data.pagenum != 1) {
          customers = {
            ...customers,
            ...this.data.customers
          }
        }
        let anchorList = Object.keys(customers);
        anchorList.push("#")
        anchorList.sort()
        if (anchorList.indexOf('#') != -1) {
          anchorList.splice(anchorList.indexOf('#'), 1)
          anchorList.push("#")
        }
        // console.log(anchorList)
        // console.log(repData.data)
        if(this.data.pagenum  == 1){
          this.setData({
            customerList:repData.data.list
          })
        }else{
          this.setData({
            customerList: [...repData.data.list, ...this.data.customerList],
          })
        }
        this.setData({
          customers,
          anchorList, //首字母
          statistical: repData.data,
        })
        try {
          this.triggerEvent("updateCountData", {
            memberLostCount: repData.data.memberLostCount
          })
        } catch (error) {

        }
      }
    },
    // 点击跳转客户资料页面
    customersData(e) {
      let customerUserId = e.currentTarget.dataset.userid;
      let corpUserId = e.currentTarget.dataset.corpuserid;
      wx.navigateTo({
        url: '/pages/customer/detail/customer_info?customerUserId=' + customerUserId + '&corpUserId=' + corpUserId
      })
    }

/* pages/customer/component/customerltem2/index.wxss */
.indexAnchor{
  color: #999999;
  font-size: 24rpx;
  font-weight: 400;
  margin: 17rpx 0rpx;
}
.employeeName{
  background: #ffffff;
  margin-top: 2rpx;
}
.image_header{
  margin: 20rpx 20rpx 29rpx 32rpx;
}
.text_name{
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  display: flex;
  align-items: center;
}
.text_classify{
  font-size: 28rpx;
  font-weight: 300;
  color: #00bc1d;
  margin-left: 10rpx;
}
.text_serve{
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 14rpx;
}
.text_phone{
  font-size: 24rpx;
  font-weight: 400;
  color: #007aff;
  margin-left: 54rpx;
}
.text_beformtime{
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 18rpx;
}
.text_number{
  margin-right: 62rpx;
  color: #999999;
  font-weight: 400;
  font-size: 24rpx;
}
.view_image{
  height: 1300rpx;
  width: 750rpx;
  background: #f3f3f3;
}

在页面中使用

<customerltem anchorList="{{anchorList}}" ></customerltem>