wx:for循环实现微信列表的实现

思路：通过写一个组件，然后我们遍历数组，将data值动态绑定到循环的数组对象中、

1: html

<view class="container">
      <view class="listItem" wx:for='{{list}}'  wx:key="item">
        <image src='{{item.icon}}'></image>
        <text>{{item.text}}</text>
        <image src="/pages/image/timg.png"></image>
      </view>
</view>

2:通过data自定义赋值

data: {
    list:[
        { text: '朋友圈', icon: '/pages/image/timg.png' },
        { text: '扫一扫', icon: '/pages/image/timg.png' },
        { text: '摇一摇', icon: '/pages/image/timg.png' },
        { text: '看一看', icon: '/pages/image/timg.png' },
        { text: '搜一搜', icon: '/pages/image/timg.png' },
        { text: '购物', icon: '/pages/image/timg.png' },
        { text: '游戏', icon: '/pages/image/timg.png' },
        { text: '小程序', icon: '/pages/image/timg.png' }
    ]
  },

3:简单的flex布局

.container{
  height: 100vh;
  background-color:silver;
  display: flex;
  flex-direction: column;
}

.listItem{
  display: flex;
  flex-direction: row;
  justify-content: center;
  border:1rpx solid silver;
  padding: 10rpx;
  background-color: white;
}
image{
  width: 80rpx;
  height: 80rpx;
  margin: 0 15rpx; 
}
text{
font-size: 40rpx;
 flex-grow: 1;
}

在这里我们注意下
flex-grow：1这行代码单独出现的时候，将会将空余部分填充，如果出现flex-grow：3则是按照比列分割

学习总结

1：wx-for最基本的使用
2：flex-grow属性加深理解