微信小程序时间轴实现方法示例


Posted in Javascript onJanuary 14, 2019

本文实例讲述了微信小程序时间轴实现方法。分享给大家供大家参考,具体如下:

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

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

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 #Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 #Javascript
用npm-run实现自动化任务的方法示例
Jan 14 #Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 #Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 #Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 #Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 #Javascript
You might like
PHP邮件专题
2006/10/09 PHP
第一节--面向对象编程
2006/11/16 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP分页类集锦
2014/11/18 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
优秀村官事迹材料
2014/01/10 职场文书
《月迹》教学反思
2014/02/19 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
小学生优秀评语
2014/12/29 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL