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


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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
来自chinaz的ajax获取评论代码
May 03 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
微信小程序实现图片上传功能
May 28 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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中的一些数组排序方法分享
2012/07/20 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
javascript学习网址备忘
2007/05/29 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
vue 过滤器filter实例详解
2018/03/14 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python脚本定时发送邮件
2020/12/22 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
Oracle的内存结构(Memory structures)
2015/06/10 面试题
库房主管岗位职责
2013/12/31 职场文书
优秀村官事迹材料
2014/01/10 职场文书
2014升学宴答谢词
2014/01/26 职场文书
道路建设实施方案
2014/03/18 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
初中信息技术教学反思
2016/02/16 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang