微信小程序——时间轴的实现

最近项目需要在页面上做一个时间轴，又是第一次做，而且还是在小程序上，要知道小程序里面没有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: '垃圾太多'},]
});

再看页面，已经出来了，是不是很简单

微信小程序——时间轴的实现相关推荐

微信小程序-时间轴/抽屉展开收起特效
微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创,转载请注明出处. 一.效果图默认为展开状态 --- 左:展开:右:收起二.代码片段: 1.wxml部分 <view c ...
微信小程序时间轴demo_微信小程序近期能力更新时间轴汇总
微信小程序近期能力更新频繁,作为第三方服务商,延誉宝CMS近期的升级也非常频繁.我们简单回顾一下具体时间节点. 几个主要的时间轴如下 2020-07-08 H5 跳转小程序能力公测为满足 H5 和小 ...
小程序时间轴和地区列表的实现，js+css实现时间轴效果
老规矩先看效果图先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...
微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
taro微信小程序时间组件picker的使用--省市区三级联动
微信小程序时间组件实现三级联动项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...
Mpvue微信小程序时间消耗进度条组件的实现
实现效果: 组件源码: 组件主要涉及时间的计算.闰年的判断,比较简单,因此注释比较少. <progress></progress>组件为微信小程序官方的进度条. <tem ...
微信小程序时间格式在IOS苹果手机上不识别
场景:微信小程序,后台给前端返回了一个 "2022-12-29 16:10:20" 这样的时间格式,在安卓手机上可以正常显示,但是在苹果手机上不识别原因: 是因 ...
微信小程序时间标签和时间范围的联动
最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.picker,用wxss对radio按照需求进行 ...
微信小程序时间加法_微信小程序获取系统时间、时间戳、时间时间戳加减
微信小程序获取系统时间.时间戳.时间时间戳加减,微信小程序获取明天时间 //获取当前时间戳 var timestamp = Date.parse(new Date()); timestamp = ti ...
微信小程序时间格式倒计时
Page({// 倒计时count_down: function (countDown_time){var that = this;var time = countDown_time.split(': ...

微信小程序——时间轴的实现

微信小程序——时间轴的实现相关推荐

最新文章

热门文章