微信小程序时间轴实现方法示例
作者:有个派大星 时间: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
标签:微信小程序,时间轴
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Access中的模糊查询
2007-11-18 14:57:00
浅谈一下python线程池简单应用
2023-08-27 10:48:37
Golang学习之平滑重启
2024-04-25 15:05:57
![](https://img.aspxhome.com/file/2023/8/134228_0s.png)
order by newid() 各种数据库随机查询的方法
2024-01-19 16:53:14
vue中的stylus及stylus-loader版本问题
2023-07-02 16:32:20
在vscode中配置python环境过程解析
2021-10-08 20:28:15
![](https://img.aspxhome.com/file/2023/8/126928_0s.png)
Vue编写多地区选择组件
2024-06-07 15:24:40
![](https://img.aspxhome.com/file/2023/7/123007_0s.gif)
Django Web开发中django-debug-toolbar的配置以及使用
2022-12-15 22:32:14
![](https://img.aspxhome.com/file/2023/0/81590_0s.png)
Python爬虫获取整个站点中的所有外部链接代码示例
2021-03-01 09:52:39
![](https://img.aspxhome.com/file/2023/2/97722_0s.jpg)
编写兼容IE和FireFox的脚本
2009-05-19 12:01:00
Mysql性能优化之索引下推
2024-01-18 07:41:05
![](https://img.aspxhome.com/file/2023/5/110295_0s.png)
Go gRPC进阶教程gRPC转换HTTP
2024-05-21 10:25:57
![](https://img.aspxhome.com/file/2023/5/123965_0s.gif)
Python实现连接MySQL数据库的常见方法总结
2024-01-22 05:28:26
Golang递归获取目录下所有文件方法实例
2024-04-25 15:19:00
Python验证码识别的方法
2023-05-30 10:22:39
PHP完全二叉树定义与实现方法示例
2023-07-04 10:49:10
![](https://img.aspxhome.com/file/2023/8/55378_0s.jpg)
Python使用Keras OCR实现从图像中删除文本
2022-07-22 20:50:24
![](https://img.aspxhome.com/file/2023/9/80569_0s.jpg)
微信小程序报错:this.setData is not a function的解决办法
2024-04-19 09:47:17
python使用tqdm模块处理文件阅读进度条显示
2022-09-08 11:29:17
![](https://img.aspxhome.com/file/2023/3/76793_0s.jpg)
Spring数据库连接池实现原理深入刨析
2024-01-12 17:16:53
![](https://img.aspxhome.com/file/2023/4/71234_0s.png)