小程序列表模板

今天做小程序列表頁(yè)面 百度搜了一圈也沒(méi)有一個(gè)模板 今天花了兩個(gè)小時(shí)自己做了一個(gè)
放圖 ！ 中間的隔離線在手機(jī)顯示的時(shí)候顏色比較淺 截圖上面顯示的比較深

數(shù)據(jù)是死的 弄成活的寫for就可以了
WXML代碼

<image class="imgs" src="http://pic.616pic.com/bg_w1180/00/03/32/ZMmnErVcVd.jpg!/fw/1120"></image>


 <!--賬號(hào)--> 
 <view class="inputView"> 
 <image class="nameImage" src="../imgs/sosuo.png"></image> 
 <label class="loginLab">搜索</label> 
 <input class="inputText" placeholder="請(qǐng)輸入申請(qǐng)人" bindinput="phoneInput" /> 
 </view> 

<view class="view">
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  <text>\n</text>
<view>
<text  class="text1"> 申請(qǐng)人</text>
<text  class="applicant"> 馬云</text>
</view>
<view>
<text class="text3"> 執(zhí)行人</text>
<text  class="executor"> 馬化騰</text>
</view>
     <!-- 分割線 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 結(jié)束時(shí)間 </text>
<text  class="endtime">2020-10-14 10:09:33</text>
</view>
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  </view>

  <view class="view">
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  <text>\n</text>
<view>
<text  class="text1"> 申請(qǐng)人</text>
<text  class="applicant"> 馬云</text>
</view>
<view>
<text class="text3"> 執(zhí)行人</text>
<text  class="executor"> 馬化騰</text>
</view>
     <!-- 分割線 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 結(jié)束時(shí)間 </text>
<text  class="endtime">2020-10-14 10:09:33</text>
</view>
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  </view>


  <view class="view">
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  <text>\n</text>
<view>
<text  class="text1"> 申請(qǐng)人</text>
<text  class="applicant"> 馬云</text>
</view>
<view>
<text class="text3"> 執(zhí)行人</text>
<text  class="executor"> 馬化騰</text>
</view>
     <!-- 分割線 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 結(jié)束時(shí)間 </text>
<text  class="endtime">2020-10-14 10:09:33</text>
</view>
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  </view>



  <view class="view">
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  <text>\n</text>
<view>
<text  class="text1"> 申請(qǐng)人</text>
<text  class="applicant"> 馬云</text>
</view>
<view>
<text class="text3"> 執(zhí)行人</text>
<text  class="executor"> 馬化騰</text>
</view>
     <!-- 分割線 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 結(jié)束時(shí)間 </text>
<text  class="endtime">2020-10-14 10:09:33</text>
</view>
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  </view>



  <view class="view">
     <!-- 隔離線 -->
  <view class="divLine1"></view>
  <text>\n</text>
<view>
<text  class="text1"> 申請(qǐng)人</text>
<text  class="applicant"> 馬云</text>
</view>
<view>
<text class="text3"> 執(zhí)行人</text>
<text  class="executor"> 馬化騰</text>
</view>
     <!-- 分割線 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 結(jié)束時(shí)間 </text>
<text  class="endtime">2020-10-14 10:09:33</text>
</view>
<!-- 隔離線 -->
<view class="divLine1"></view>
</view>

WXSS

.imgs{
  width: 803rpx;
  height: 390rpx;
}

/*分割線樣式*/
.divLine{
  background: #E0E3DA;
  width: 100%;
  height: 5rpx;
  position: relative;
  top: -13rpx;
  left: -1rpx;  
 }

 /*隔離線樣式*/
.divLine1{
  /* background: rgb(193, 190, 190); */
  background: #edeeec;
  width: 99%;
  height: 14rpx;  
 }
 .view{
  position: relative;
  top: -85rpx;
  left: 4rpx;  
 }
.text1{
  font-family:Microsoft YaHei;
  position: relative;
  top: -44rpx;
  left: 51rpx;
  font-size: 30rpx;
}

.text3{
  font-family:Microsoft YaHei;
  position: relative;
  top: -27rpx;
  left: 51rpx;
  font-size: 30rpx;

}
.text2{
  font-family:Microsoft YaHei;
  position: relative;
  top: -8rpx;
  left: 36rpx;  
  font-size: 30rpx;

}
.applicant{
  font-family: Microsoft YaHei;
position: relative;
top: -46rpx;
left: 405rpx;
font-size: 30rpx;

}
.executor{
  font-family:Microsoft YaHei;
  position: relative;
  top: -27rpx;
  left: 393rpx;
  font-size: 30rpx;

}
.endtime{
  font-family:Microsoft YaHei;
  position: relative;
  top: -3rpx;
  left: 230rpx;
  font-size: 30rpx;

}

/* 輸入框 11*/
.inputView { 
  background-color: #fff;
  line-height: 41px;
  position: relative;
  top: -141rpx;
  left: 88rpx;
  width: 557rpx;
  border-radius: 12rpx;
 } 
 
 .nameImage, .keyImage { 
  margin-left: 22px;
  width: 32px;
   height: 28px;
  position: relative;
  top: 16rpx;
  left: -31rpx;  
 } 

 .loginLab { 
  margin: 15px 15px 15px 10px; 
  color: #545454; 
  font-size: 14px;
  position: relative;
  top: -2rpx;
  left: -31rpx;  
 } 

 .inputText { 
  flex: block;
  float: right;
  text-align: right;
  margin-right: 42px;
  margin-top: -32px;
  color: #cccccc;
  font-size: 14px;  
 }