小程序小程序列表模板

女爷i 2022-12-15 02:19 168阅读 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 条评论，168人围观）

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

相关阅读

相关【小程序】WXML 模板

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

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

相关小程序模板传递信息

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

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

相关小程序使用模板

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

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

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

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

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

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

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

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

相关小程序：模板与引用

准备工作：新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.

末蓝、/ 2022年04月25日 10:22/ 0 赞/ 242 阅读

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

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

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

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

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

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

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

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

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

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

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

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