微信小程序时间轴实现方法示例
作者:有个派大星 发布时间:2024-04-18 10:02:17
标签:微信小程序,时间轴
本文实例讲述了微信小程序时间轴实现方法。分享给大家供大家参考,具体如下:
最近项目需要在页面上做一个时间轴,又是第一次做,而且还是在小程序上,要知道小程序里面没有ol/ul/li,看了好几个例子,最后做出来了,开心呀!如图:
做起来其实很简单:一个时间轴包括一个圆圈(css实现圆圈或者找一个圆圈图片)+一条线(css实现直线或者找一个直线的图片)+内容
来看我的代码(代码很不规范,请忽略):
wxml
<view class='weui-cell-third'>
<view class="page__title">
<image class='page-image' src="/static/img/1.png" />工作动态</view>
<block wx:for="{{axis}}" wx:key="*this">
<view class='weui-cell-list'>
<view class='weui-cell-circle'></view>
<view class='weui-cell-line'>
<view class='weui-cell-time'>{{item.time}}</view>
<view class='weui-cell-name'>{{item.name}}</view>
<view class='weui-cell-event'>{{item.event}}</view>
</view>
</view>
</block>
</view>
wxss:
.weui-cell-third{
background: #fff;
}
.weui-cell-list{
background: #fff;
margin: 5px 50px 5px 50px;
}
.weui-cell-line{
/* width: 100px; */
margin-left: 5px;
border-left: 1px solid #ddd;
height: 100px;
background: #fff
}
.weui-cell-circle{
border: 1px solid #000;
border-radius: 5px;
width: 10px;
height: 10px;
border-color: blue;
}
.weui-cell-time{
/* width: 50px; */
float: left;
font-size:14px;
padding-left: 15px;
width: 72px;
}
.weui-cell-event{
padding-top: 15px;
padding-left: 15px;
}
.weui-cell-name{
font-size:14px;
height:23px;
margin-left: 100px;
}
js:
Page({
axis:[
{
time:'2018-2-15',
name:'张三',
event:'垃圾太多'
},
{
time: '2018-2-15',
name: '王三',
event: '垃圾太多'
},
{
time: '2018-2-15',
name: '张三',
event: '垃圾太多'
},
{
time: '2018-2-15',
name: '张三',
event: '垃圾太多'
},
]
});
再看页面,已经出来了,是不是很简单
希望本文所述对大家微信小程序开发有所帮助。
来源:https://blog.csdn.net/oschina_41661541/article/details/81217619
0
投稿
猜你喜欢
- 本文实例讲述了MHA实现mysql主从数据库手动切换的方法,分享给大家供大家参考。具体方法如下:一、准备工作1、分别在Master和Slav
- 经我们技术员检查,结果原来是eWebEditor文本编辑器对IE8浏览器的兼容性导致的脚本错误,并不是什么“网站空间、服务器中毒、出问题了”
- 一、find_element_by_id()find_element_by_id()1.从上面定位到的元素属性中,可以看到有个id属性:id
- 开发过程中,我们经常会遇到代码回滚的情况。正常人都知道,git 回滚有两大宝:git revertgit reset当我们在本地开发,还未
- socket只能处理一个client连接,如果需要并发处理多个链接则需要使用socketserver,下面是代码示例以及注释server端i
- 窗口函数简单理解,就是对查询的结果多出一列,这一列可以是聚合值,也可以是排序值。开窗函数一般就是说的是over()函数,其窗口是由一个 OV
- 实现一个AuditLog的功能,是B/S结构专案。 每个用户可以登录系统,在程序中操作数据(添加,更新和删除)需要实现记录操作跟踪。是谁添加
- 起步Pandas最初被作为金融数据分析工具而开发出来,因此 pandas 为时间序列分析提供了很好的支持。 Pandas 的名称来自于面板数
- 我们在创建表的过程中难免会考虑不周,因此后期会修改表修改表需要用到alter table语句 修改表名 mysql> alter ta
- 本文实例讲述了js+ajax实现获取文件大小的方法。分享给大家供大家参考,具体如下:顾名思义,通过JS和Ajax来获取上传文件的大小,在上传
- 描述:使用QtDesignner设计界面,pyQt5+python3实现主体方法制作的猜数字游戏。游戏规则:先选择游戏等级:初级、中级、高级
- 前言最近在解决一些算法优化的问题,为了实时性要求,必须精益求精的将资源利用率用到极致。同时对算法中一些处理进行多线程或者多进程处理。在对代码
- 题目描述从上到下按层打印二叉树,同一层结点从左至右输出。每一层输出一行。思路:1、把每层节点的val值用list存好2、把每层节点存好:①计
- 这不仅仅是一个信息 * 的时代,也是一个服务 * 的时代。一切都是因为互联网,随着互联网技术的发展,信息的增多,服务的增多,用户需求的多样化。怎
- python里dict(字典)怎么变成list(列表)?说明:列表不可以转换为字典1、转换后的列表为无序列表a = {'a'
- 如果不是因为总监审查严格,一定要求这个细节解决掉,也许我也不会去深究根源性的解决办法,再此感谢MTIME负责而严格的同事。首先描述一下问题:
- 也许光从字面上来说,版式设计中的“亲密性”似乎不太好理解,正常的情况下,我们都会把“亲密性”理解为人与人之间的关系的一种表现,事实上在版式设
- 前言Matplotlib的可以把很多张图画到一个显示界面,在作对比分析的时候非常有用。对应的有plt的subplot和figure的add_
- PDO::rollBackPDO::rollBack — 回滚一个事务(PHP 5 >= 5.1.0, PECL pdo >=
- 看看怎样抓到你:<%Dim objCMFUDim strModifiedSet objCMFU