本文實(shí)例講述了微信小程序時(shí)間軸實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
最近項(xiàng)目需要在頁(yè)面上做一個(gè)時(shí)間軸，又是第一次做，而且還是在小程序上，要知道小程序里面沒有ol/ul/li，看了好幾個(gè)例子，最后做出來了，開心呀！如圖：
做起來其實(shí)很簡(jiǎn)單：一個(gè)時(shí)間軸包括一個(gè)圓圈（css實(shí)現(xiàn)圓圈或者找一個(gè)圓圈圖片）+一條線（css實(shí)現(xiàn)直線或者找一個(gè)直線的圖片)+內(nè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)出來了，是不是很簡(jiǎn)單
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
