学习打卡04 小程序03

一、flex布局

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor": "#000000",   //黑色
    "navigationBarTitleText": "发现"       //导航标题
  },
  "sitemapLocation": "sitemap.json"    //配置其小程序页面是否允许为微信索引
}
​

<!--index.wxml-->
<view class = "container">
  <view class="listGroup" wx:for="{{list}}" wx:for-item="value" wx:key="value{{index}}">
    <view class="listItem" wx:for="{{value}}" wx:for-item="value1" wx:key="value{{index}}">
    <image src="{{value1.icon}}"></image>
    <text>{{value1.text}}</text>
    <image></image>
    </view>
  </view>
</view>

/**index.wxss**/
​
.container{
  height: 100vh;                       //100视窗
  background-color: silver;            //背景色 银色
  display: flex;                       //flex布局
  flex-direction: column;              //垂直布局
}
​
.listGroup{
  background-color: white;              
  margin: 20rpx 0;                   //元素边缘 上下外边距20rpx 左右距离为0
}
​
.listItem{
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1rpx solid silver;
  padding: 10rpx;
}
​
image{
  width: 80rpx;
  height: 80rpx;
  margin: 0 15rpx;
}

二、循环创建栏目

// index.js
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    list: [
      [
        {text:'朋友圈',icon:''}
      ],
      [
        {text:'扫一扫',icon:''},
        {text:'摇一摇',icon:''}
      ],
      [
        {text:'搜一搜',icon:''},
        {text:'搜一搜',icon:''}
      ],
      [
        {text:'购物',icon:''},
        {text:'游戏',icon:''}
      ],
      [
        {text:'小程序',icon:''}
      ],
    ]
  }
})

wxml中绑定循环，用 wx:for， wx:for-item 取别名, wx:key 当前的key值，{{index}}表示当前的索引值