微信小程序用vant组件制作通讯录

微信小程序用vant组件制作通讯录
效果图：

代码如下：
.wxml:

在这里插入<van-index-bar index-list="{{ indexList }}">
  <view>
    <van-index-anchor index="省" use-slot="true">省级负责人</van-index-anchor>
    <view class='user' wx:for='{{provList}}'wx:key='name'>
       <image class='icon' src='{{item.photo}}'></image> 
     <view class='text'>{{item.name}}</view>
    </view>
  </view>

  <view>
    <van-index-anchor  class='title' index="市" use-slot="true">市级负责人</van-index-anchor>
    <view class='user' wx:for='{{cityList}}'wx:key='name'>
       <image class='icon' src='{{item.photo}}'></image> 
     <view class='text'>{{item.name}}</view>
    </view>
  </view>
   <view>
    <van-index-anchor index="区" use-slot="true">区级负责人</van-index-anchor>
   <view class='user' wx:for='{{districtList}}'wx:key='name'>
       <image class='icon' src='{{item.photo}}'></image> 
     <view class='text'>{{item.name}}</view>
    </view>
  </view>
   <view>
    <van-index-anchor index="镇" use-slot="true" >镇级负责人</van-index-anchor>
   <view class='user' wx:for='{{townList}}'wx:key='name'>
       <image class='icon' src='{{item.photo}}'></image> 
     <view class='text'>{{item.name}}</view>
    </view>
  </view>
   <view>
    <van-index-anchor index="村" use-slot="true">村级负责人</van-index-anchor>
   <view class='user' wx:for='{{villageList}}'wx:key='name'>
       <image class='icon' src='{{item.photo}}'></image> 
     <view class='text'>{{item.name}}</view>
    </view>
  </view>
</van-index-bar>代码片

.js文件

 data: {
    indexList:["省","市","区","镇","村"],
    provList:[
           { 
             name:'李宏伟',
             photo:'/images/1.jpg'
            },
          { name:'赵爱国',
          photo:'/images/2.jpg'
        }
        ],
    cityList:[
      { 
        name:'钱必胜',
        photo:'/images/3.jpg'
       },
     { name:'李美丽',
     photo:'/images/4.jpg'
   }
     
    ],
    districtList:[
      { 
        name:'王爱丽',
        photo:'/images/5.jpg'
       },
     { name:'李秀秀',
     photo:'/images/5.jpg'
   }
    ],
    townList:[
      { 
        name:'马鑫',
        photo:'/images/6.jpg'
       },
     { name:'赵明华',
     photo:'/images/7.jpg'
   }
    ],
     villageList:[
      { 
        name:'赵小妹',
        photo:'/images/8.jpg'
       },
     { name:'周庭',
     photo:'/images/9.jpg'
   },{
     name:"周国伟",
     photo:"/images/3.jpg"
   }
     ]
    ,

   },

.wxss

.user{
  border-bottom: 2rpx gray solid;
  height:38px ;
  display: flex;
}
.icon{
  width: 35px;
  height: 35px;
  border-radius: 10px;
  flex:1;
  margin: 0px 18px;
}
.text{
  margin:0px;
  line-height:38px;
  flex: 8;
}

.json文件

 "usingComponents": {
    "van-index-bar": "/miniprogram_npm/@vant/weapp/index-bar/index",
  "van-index-anchor": "/miniprogram_npm/@vant/weapp/index-anchor/index",
  "van-cell":"/miniprogram_npm/@vant/weapp/cell/index"
  },//引入vant组件