本文实例讲述了微信小程序时间轴实现方法。分享给大家供大家参考,具体如下:
最近项目需要在页面上做一个时间轴,又是第一次做,而且还是在小程序上,要知道小程序里面没有ol/ul/li,看了好几个例子,最后做出来了,开心呀!如图:
做起来其实很简单:一个时间轴包括一个圆圈(css实现圆圈或者找一个圆圈图片)+一条线(css实现直线或者找一个直线的图片)+内容
来看我的代码(代码很不规范,请忽略):
wxml
<view class='weui-cell-third'> <view class="page__title"> <image class='page-image' src="/UploadFiles/2021-04-02/1.png">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: '垃圾太多' }, ] });再看页面,已经出来了,是不是很简单
希望本文所述对大家微信小程序开发有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 【雨果唱片】中国管弦乐《鹿回头》WAV
- APM亚流新世代《一起冒险》[FLAC/分轨][106.77MB]
- 崔健《飞狗》律冻文化[WAV+CUE][1.1G]
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR(引进版)【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大,至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大,至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】