微信小程序时间轴实现方法示例
154 浏览量
2020-10-17
12:40:45
上传
评论
收藏 37KB PDF 举报
微信小程序时间轴实现方法示例微信小程序时间轴实现方法示例
主要介绍了微信小程序时间轴实现方法,结合实例形式分析了微信小程序wx:for语句使用与时间轴纵向布局相关
操作技巧,需要的朋友可以参考下
本文实例讲述了微信小程序时间轴实现方法。分享给大家供大家参考，具体如下：
最近项目需要在页面上做一个时间轴，又是第一次做，而且还是在小程序上，要知道小程序里面没有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:
资源评论
weixin_38629873
- 粉丝: 2
- 资源: 967
最新资源
- 处理数据的界面，使用pyqt+pandas开发da-console-tool-master.zip
- pandas 使用笔记study-pandas-master.zip
- 基于matlab的薛定谔方程数值计算应用源码（下载即用）.zip
- docker ps: 列出运行中的容器 提供一个完整的微服务架构轻量级支撑运行时系统.zip
- 基于CS5080+TP4056 芯片5V输入4.2V 8.4V输出锂电充电控制板硬件（原理图+PCB）文件.zip
- 常用docker的参考命令.zip
- 基于matlab实现的模糊聚类分析项目源码.zip
- docker build: 从 Dockerfile 构建一个镜像
- 基于springboot的医院门诊管理系统源码.zip
- 基于python的垃圾分类系统源码（高分优质项目）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
