小程序 小程序列表模板

小程序列表模板

今天做小程序html" class="superseo">列表页面 百度搜了一圈也没有一个模板 今天花了两个小时自己做了一个

放图 ！ 中间的隔离线在手机显示的时候颜色比较浅 截图上面显示的比较深

数据是死的 弄成活的写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;  
 }