今天好冷，躲在客廳瑟瑟發(fā)抖的學(xué)習(xí)小程序。先看一下效果圖↓

準(zhǔn)備工作：在pages目錄下新建一個(gè)wxss2文件夾，并在app.json中進(jìn)行注冊(cè)，會(huì)自動(dòng)生成wxss.js等四個(gè)文件。
1.我們先看看wxml樣式的編寫

<view class="container list-container">  
 <view class="list-item">  
   <image class="left" src=https://www.wxapp-union.com/"../../resources/headImg.jpg"></image>  
   <view class="right">  
     <view class="title">  
       <view class="name">name</view>  
       <view class="phone">phone</view>  
     </view>  
     <view class="time">time</view>  
   </view>  
 </view>  
lt;/view>   

（1）container & list-container
①container在app.wxss中進(jìn)行定義，作用于全局

.container {  
  height: 100%;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-between;  
  padding: 200rpx 0;  
  box-sizing: border-box;  
}  

②list-container在wxss2.wxss中，主要目的是重新padding，覆蓋container中的參數(shù)

.list-container{  
  padding: 0  
}  

（3）最外層view的效果圖

2.一個(gè)item的編寫

可以結(jié)合兩張圖片，理解view對(duì)應(yīng)的部分，在這里不一一說明，貼上wxss的代碼↓

.list-container{  
  padding: 0  
}  
.list-item{  
  height: 100rpx;  
  display: flex;  
  flex-direction: row;  
  padding:20rpx;  
}  
.left{  
  width: 100rpx;  
  height:100rpx;  
}  
.right{  
  width: 590rpx;  
  height: 100rpx;  
  margin-left: 20rpx;  
  display: flex;  
  flex-direction: row;  
}  
.title{  
  flex: 1;  
  display: flex;  
  flex-direction: column;  
  width: 310rpx;  
}  
.name{  
  font-size: 50rpx;  
  color: #000;  
}  
.phone{  
  font-size: 35rpx;  
  color:darkgrey;  
}  
.time{  
  width: 200rpx;  
  color: #aaa;  
  font-size: 30rpx;  
}  

①list-item和right樣式中，決定其包裹的內(nèi)容水平分布

display: flex;  
flex-direction: row;  

②title樣式中，決定其包裹的內(nèi)容豎直分布↓

display: flex;  
flex-direction: column;  

此外，flex：1表示按照分布方式剩余的空間都分配給title。如該例中，right寬度為590rpx，time的寬度為200rpx，因此title的寬度為590-200=390rpx；

3.多個(gè)item項(xiàng)的編寫，我們需要在js文件中定義一個(gè)數(shù)組contactList↓

Page({  
  data: {  
    contactList:[{  
      "name":"Crab",  
      "phone":"15566667777",  
      "time":"2017-10-14"  
    },{  
        "name": "Emily",  
        "phone": "15566668888",  
        "time": "2017-10-13"  
    },{  
        "name": "Rachel",  
        "phone": "15566669999",  
        "time": "2017-10-10"  
    },{  
      "name": "Crab2",  
      "phone": "15566667777",  
      "time": "2017-10-14"  
    }, {  
      "name": "Emily2",  
      "phone": "15566668888",  
      "time": "2017-10-13"  
    }, {  
      "name": "Rachel2",  
      "phone": "15566669999",  
      "time": "2017-10-10"  
    }, {  
      "name": "Crab3",  
      "phone": "15566667777",  
      "time": "2017-10-14"  
    }, {  
      "name": "Emily3",  
      "phone": "15566668888",  
      "time": "2017-10-13"  
    }, {  
      "name": "Rachel3",  
      "phone": "15566669999",  
      "time": "2017-10-10"  
    }]  
  }  
})  

修改wxml中部分代碼， 循環(huán)訪問數(shù)組↓，可以得到最開始的效果圖。

就記錄到這里啦~ 晚安。