小程序小程序列表模板

小程序列表模板

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

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

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

微信小程序学习笔记(二)模板与配置
文章目录 1. WXML 模板语法 1.1 数据绑定 1.1.1 数据绑定的基本原则 1.1.2 在 data 中定义页面的数据 1.1.3 Mustache 语法的格式 1.1.4 Mustache ...
【小程序】小程序起步、WXML模板语法和WXSS模板样式
文章目录一.小程序-起步 1.1 小程序和普通网页开发的不同 1.2 项目的基本组成部分 1.3 小程序的宿主环境 1.3.1 通信模型 1.3.2 运行机制 1.3.3 常用的视图容器类组件vie ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
G++ 4.4.7 无法编译模板程序，Vs可以,和解?智者尾部留言,本人第一次使用vs pro,通常并且习惯在linux下写些小东西,虽然程序简单;...
G++ 4.4.7 无法编译模板程序,Vs可以,和解?智者尾部留言,本人第一次使用vs pro,通常并且习惯在linux下写些小东西,虽然程序简单; vs 模板编译运行Ok \ linux g++ 4 ...
微信小程序2（WXML模板语法）
WXML模板语法-数据绑定数据绑定的基本原则在data中定义数据在WXML中使用数据在data中定义数据在页面对应的.js文件中,把数据定义到data对象中即可: Page({data: { ...
pyqt开发的程序模板_小程序定制开发和模板开发要多少钱？有什么区别？
到现在,小程序开发已经有了1年多的历史,已经达到百万数量级.无论是小程序商城还是小程序游戏,其开发方式不外乎两种,一种是定制开发,另一种是模板开发.对于很多初次接触小程序的客户来说,还不知道小程序的开 ...
微信小程序官网DEMO模板
简介: 微信小程序官方原版DEMO模板,小程序开发参考必备人手一份,分享给大家. 网盘下载地址: http://kekewangLuo.cc/xtsm1j0hn5X0 图片:
微信小程序 - 展开收缩列表
代码源自于:微信小程序示例官方 index.wxml 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}&qu ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...

小程序小程序列表模板

小程序列表模板

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

最新文章

热门文章

小程序 小程序列表模板

小程序列表模板

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

最新文章

热门文章

小程序小程序列表模板

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