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


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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
浅谈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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
Javascript 布尔型分析
2008/12/22 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
js实现数字跳动到指定数字
2020/08/25 Javascript
python僵尸进程产生的原因
2017/07/21 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
用matplotlib画等高线图详解
2017/12/14 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
开办加工厂创业计划书
2014/01/03 职场文书
早读迟到检讨书
2014/01/24 职场文书
爱心捐助倡议书
2014/05/19 职场文书
护士自荐信怎么写
2015/03/06 职场文书
小学体育课教学反思
2016/02/16 职场文书