快捷導(dǎo)航

微信小程序時(shí)間軸實(shí)現(xiàn)方法示例

更新時(shí)間：2019年01月14日 14:13:53 作者：有個(gè)派大星

這篇文章主要介紹了微信小程序時(shí)間軸實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了微信小程序wx:for語(yǔ)句使用與時(shí)間軸縱向布局相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序時(shí)間軸實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

最近項(xiàng)目需要在頁(yè)面上做一個(gè)時(shí)間軸，又是第一次做，而且還是在小程序上，要知道小程序里面沒(méi)有ol/ul/li，看了好幾個(gè)例子，最后做出來(lái)了，開(kāi)心呀！如圖：

做起來(lái)其實(shí)很簡(jiǎn)單：一個(gè)時(shí)間軸包括一個(gè)圓圈（css實(shí)現(xiàn)圓圈或者找一個(gè)圓圈圖片）+一條線（css實(shí)現(xiàn)直線或者找一個(gè)直線的圖片)+內(nèi)容

來(lái)看我的代碼（代碼很不規(guī)范，請(qǐng)忽略）：

wxml

<view class='weui-cell-third'>
 <view class="page__title">
 <image class='page-image' src="/static/img/1.png" />工作動(dòng)態(tài)</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: '垃圾太多'
  },
 ]
});

再看頁(yè)面，已經(jīng)出來(lái)了，是不是很簡(jiǎn)單

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript仿靜態(tài)分頁(yè)實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript仿靜態(tài)分頁(yè)實(shí)現(xiàn)方法,可實(shí)現(xiàn)模擬靜態(tài)效果的分頁(yè)功能,并且可以控制分頁(yè)的字符數(shù),使用時(shí)可根據(jù)情況進(jìn)行相應(yīng)的字段修改即可,非常靈活實(shí)用,需要的朋友可以參考下
2015-08-08
在JavaScript中對(duì)HTML進(jìn)行反轉(zhuǎn)義詳解
下面小編就為大家?guī)?lái)一篇在JavaScript中對(duì)HTML進(jìn)行反轉(zhuǎn)義詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
Javascript 獲取鏈接(url)參數(shù)的方法[正則與截取字符串]
有時(shí)我們需要在客戶端獲取鏈接參數(shù)，一個(gè)常見(jiàn)的方法是將鏈接當(dāng)做字符串，按照鏈接的格式分解，然后獲取對(duì)應(yīng)的參數(shù)值。本文給出的就是這個(gè)流程的具體實(shí)現(xiàn)方法。
2010-02-02
純javascript實(shí)現(xiàn)選擇框的全選與反選功能
這篇文章主要介紹了純javascript實(shí)現(xiàn)選擇框的全選與反選 ,需要的朋友可以參考下
2019-04-04
該如何加載google-analytics(或其他第三方)的JS
很多網(wǎng)站為了獲取用戶訪問(wèn)網(wǎng)站的統(tǒng)計(jì)信息，使用了google-analytics或其他分析網(wǎng)站(下面的討論中只提google-analytics,簡(jiǎn)稱ga)。
2010-05-05
JavaScript中常用的3種彈窗(警告框、確認(rèn)框、提示框)
JavaScript提供了幾種常用的彈窗方法,用于與用戶進(jìn)行交互或顯示提示消息,這篇文章主要給大家介紹了關(guān)于JavaScript中常用的3種彈窗的相關(guān)資料,分別包括警告框、確認(rèn)框、提示框,需要的朋友可以參考下
2023-09-09
BootStrap tooltip提示框使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了BootStrap tooltip提示框使用小結(jié) ,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
js實(shí)現(xiàn)漂浮回頂部按鈕實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)漂浮回頂部按鈕的方法,實(shí)例分析了javascript實(shí)現(xiàn)返回頂部功能的樣式與動(dòng)態(tài)實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-05-05
javascript模擬命名空間
JavaScript 沒(méi)有任何特定語(yǔ)言功能來(lái)支持命名空間，但很容易使用對(duì)象來(lái)模擬命名空間。今天我們就來(lái)探討下這個(gè)問(wèn)題，希望大家能夠喜歡。
2015-04-04
JavaScript數(shù)組方法大全(推薦)
本文是小編給大家特意整理的關(guān)于js數(shù)組方法的知識(shí)，非常實(shí)用，在面試筆試題中經(jīng)常用得到，有需要的朋友可以參考下
2016-07-07