小程序小程序列表模板

原创

超级帅帅吴 2023-01-30 19:59:33 ©著作权

文章标签 列表 html 小程序 web css 文章分类 Spark 大数据

©著作权归作者所有：来自51CTO博客作者超级帅帅吴的原创作品，请联系作者获取转载授权，否则将追究法律责任

小程序列表模板

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

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

小程序小程序列表模板_html

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