微信小程序扩展组件index-list，添加图片

安装

npm install @miniprogram-component-plus/index-list

在页面.json配上路径

 "usingComponents": {
    "mp-index-list": "@miniprogram-component-plus/index-list",
  }

想要实现左边有图面，这种功能，我是将图片定位到组件左边

wxml里

<mp-index-list class="city__list" list="{{list}}" bindchoose="onChoose" wx:if="{{list.length > 0 && !searchStatus}}">
    <view class="list-page">
        <view class="index-list-img">
         <view  class="list-img-inner" wx:for="{{list}}">
          <view class="list-img-box" wx:for="{{item.subItems}}" wx:for-item="item1">
            <image class="list-img" src="{{item1.img}}" mode=""/>
          </view>
       </view>
    </view>
    </view>
</mp-index-list>

js里处理数据

list=[{
      "depth": 1,
      "initial": "A",
      "name": "m0m0",
      "logo": "img",
      "img": 158090,
      "parentid": 0
  },]
  getCitys() {
    const _this = this
    wx.showLoading({
      title: '加载中',
      mask: true,
})
        const cities = list
        const map = new Map()
        for (const city of cities) {
          const alpha = city.initial
          if (!map.has(alpha)) map.set(alpha, [])
          map.get(alpha).push({ name: city.carName,img:city.logo,carId:city.carId})
        }
        const keys = []
        for (const key of map.keys()) {
          keys.push(key)
        }
        keys.sort()
    
        const list = []
        for (const key of keys) {
          list.push({
            alpha: key,
            subItems: map.get(key)
          })
        }
        console.log(list,'listlist');
        wx.hideLoading()
        _this.setData({list})
    
  },

wxss，需要保证图片高度与文字一致，这里是都是96rpx，索引值是98rpx，就是图片每组循环间距98rpx，保证一致不会串，index-group__list 偏移得位置正好放图片。

.index-group__title {
    color: #2D2D2D;
    height: 98rpx;
    box-sizing: border-box;
}
.index-group__item {
    color: #000;
    height: 96rpx;
    box-sizing: border-box;
}
.index-list-img{
  position: absolute;
  left: 20rpx;
  width: 100%;
  margin-top: 98rpx;
}
.list-page{
  position: relative;
}
.list-img{
  max-height: 80rpx;
  width: 80rpx;
  overflow: hidden;
}
list-img image {
  width: 100%;
  height: 100%;
}
.index-group__list{
  padding-left: 100rpx;
}