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


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 相关文章推荐
JQuery触发事件例如click
Sep 11 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
javascript填充默认头像方法
Feb 22 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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
咖啡的植物学知识
2021/03/03 咖啡文化
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python 安装impala包步骤
2020/03/28 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
中国跨境电商:Tomtop
2017/03/16 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
南京迈特望C/C++面试题
2012/07/09 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
给校长的建议书200字
2014/05/16 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang