小程序小程序列表模板

女爷i 2022-12-15 02:19 226阅读 0赞

## ***小程序列表模板*** ##

今天做小程序列表页面 百度搜了一圈也没有一个模板 今天花了两个小时自己做了一个  
放图 ！ 中间的隔离线在手机显示的时候颜色比较浅 截图上面显示的比较深  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center]  
数据是死的 弄成活的写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;  
     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjY0MzI5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7efb8b8eadf6462c83fc3194448f3751.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】WXML 模板

目录 WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 J

水深无声/ 2024年03月30日 11:08/ 0 赞/ 77 阅读

相关【uniapp小程序】打印列表UI模板

这是一个云打印项目，首页查询接口渲染设备，设备是否在线是通过redis进行判断的，当设备在线时可以通过在线的驱动软件打印用户提交的文档，自动处理无需人工干预 ![在这里插入

╰半橙微兮°/ 2023年10月11日 23:29/ 0 赞/ 12 阅读

相关小程序模板传递信息

<import src="../productList/productList.wxml"></import> <!--

╰+攻爆jí腚メ/ 2023年01月12日 14:57/ 0 赞/ 176 阅读

相关小程序使用模板

使用模板：  <import src="../productList/productList.wxml"></import>

骑猪看日落/ 2023年01月12日 14:55/ 0 赞/ 205 阅读

相关小程序小程序列表模板

小程序列表模板今天做小程序列表页面百度搜了一圈也没有一个模板今天花了两个小时自己做了一个放图！中间的隔离线在手机显示的时候颜色比较浅截图上面显示的比较深

女爷i/ 2022年12月15日 02:19/ 0 赞/ 227 阅读

相关小程序模板-评分星星

概述我们将以一个实战项目为主要内容，穿插讲解小程序的各种概念。因为没有UI和后端，所以，我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类

谁借莪１个温暖的怀抱￠/ 2022年05月31日 11:17/ 0 赞/ 296 阅读

相关微信小程序模板消息实现（PHP+小程序）

参考官方文档和部分资料，总结小程序模板消息推送以及相关注意事项，楼主踩过的坑，特来与大家分享。一、开发准备： 1. 在微信公众平台 - 小程序的模板中心申请消息模板 [

绝地灬酷狼/ 2021年11月22日 16:14/ 0 赞/ 485 阅读

相关 wx小程序——小程序模板在外部页面引用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

川长思鸟来/ 2021年07月25日 22:34/ 0 赞/ 562 阅读

相关 wx小程序——列表渲染

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

柔情只为你懂/ 2021年07月25日 19:02/ 0 赞/ 508 阅读

相关 wx小程序—— 小程序页面通用模板的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2021年07月25日 17:52/ 0 赞/ 545 阅读