微信小程序-通用设置item栏小封装

大家好，刚开始玩微信小程序，做了点小demo，记录自己的学习历程，同时分享给大家希望带给大家一点方便。
扫一扫，看是不是你想要的效果

wxml部分

<view class='list-view'>
  <view class='list-bord' >
 
  <block wx:for="{{infos}}" wx:key="index">
    <view class='list-item' bindtap="itemClick" data-index="{{index}}">
      <view >
        <image class="image" src="/assets/images/profile/{{item.icon}}"/>
      </view>
      <view class="item_text">
        <text class="text" >{{item.info}}</text>
      </view>
      <view >
      <image class="image" src="/assets/images/profile/right_click.png" />
      </view>
    </view>
  </block>
</view>
</view>

js代码部分

// pages/profile/childCpns/w-list-view/w-list-view.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
   
  },

  /**
   * 组件的初始数据
   */
  data: {
    infos: [{
      info: "绑定邮箱",
      icon: "message.png"
    },
    {
      info: "测试",
      icon: "sm.png"
    }
  ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    itemClick(e){
      let index = e.currentTarget.dataset.index
      
      if(index == 0){
        //邮箱
        
      }else if(index == 1){
       
        
      }
    }
  }
})

css部分

/* pages/profile/childCpns/w-list-view/w-list-view.wxss */
.list-view {
  border-top: 36rpx solid #f8f8f8;
}

.list-item {
  width: 100%;
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  background: #fff;
  font-size: 32rpx;
  margin-left: 50rpx;
  border-top: 1px solid #c2c2c2;
}

.list-item:first-child{
  border-top: none;
}

.list-bord {
  border-top: 1px solid #c2c2c2;
  border-bottom: 1px solid #c2c2c2;
}


.list-item .image {
  width: 40rpx;
  height: 40rpx;
  vertical-align: middle;
}

.list-item .text {
  vertical-align: middle;
  margin-left: 16rpx;
}

.item_text{
  width: 80%;
}

结束，欢迎大家评论区多提意见。