小程序小程序列表模板-蒲公英云

小程序列表模板

今天做小程序列表页面百度搜了一圈也没有一个模板今天花了两个小时自己做了一个
放图！中间的隔离线在手机显示的时候颜色比较浅截图上面显示的比较深
在这里插入图片描述
数据是死的弄成活的写for就可以了
WXML代码

<image class="imgs" src="http://pic.616pic.com/bg_w1180/00/03/32/ZMmnErVcVd.jpg!/fw/1120"></image>
 <!--账号--> 
 <view class="inputView"> 
 <image class="nameImage" src="../imgs/sosuo.png"></image> 
 <label class="loginLab">搜索</label> 
 <input class="inputText" placeholder="请输入申请人" bindinput="phoneInput" /> 
 </view> 
<view class="view">
     <!-- 隔离线 -->
  <view class="divLine1"></view>
  <text>\n</text>
<view>
<text  class="text1"> 申请人</text>
<text  class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text  class="executor"> 马化腾</text>
</view>
     <!-- 分割线 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 结束时间 </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"> 申请人</text>
<text  class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text  class="executor"> 马化腾</text>
</view>
     <!-- 分割线 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 结束时间 </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"> 申请人</text>
<text  class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text  class="executor"> 马化腾</text>
</view>
     <!-- 分割线 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 结束时间 </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"> 申请人</text>
<text  class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text  class="executor"> 马化腾</text>
</view>
     <!-- 分割线 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 结束时间 </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"> 申请人</text>
<text  class="applicant"> 马云</text>
</view>
<view>
<text class="text3"> 执行人</text>
<text  class="executor"> 马化腾</text>
</view>
     <!-- 分割线 -->
  <view class="divLine"></view>
  <view></view>
<view>
<text class="text2"> 结束时间 </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;  
 }