小程序時間軸和地區列表的實現，js+css實現時間軸效果

時間 2019-12-04

原文原文鏈接

老規矩先看效果圖 java

先來看左圖的地區列表是如何實現的。

咱們在解析數據以前，要先看下數據結構數據庫

[{
	"_id": "XL28U3kPDdDCJ9m0",
	"item": {
		"diqu": "北京",
		"list": [{
			"id": "XL27oeSiwXKAQuFR",
			"name": "清華大學",
			"img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2693386884,1727296839\u0026fm=58\u0026bpow=1200\u0026bpoh=1200"
		}, {
			"id": "XL27oeSiwXKAQuF1",
			"name": "北京大學",
			"img": "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2152123166,2178049351\u0026fm=58\u0026bpow=1080\u0026bpoh=1080"
		}, {
			"id": "XL27oeSiwXKAQuF2",
			"name": "人民大學",
			"img": "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2642337058,1598432384\u0026fm=58\u0026w=121\u0026h=140\u0026img.PNG"
		}]
	}
}, {
	"_id": "XL28U3kPDdDCJ9m1",
	"item": {
		"diqu": "杭州",
		"list": [{
			"id": "XL27oeSiwXKAQuF3",
			"name": "杭州師範大學",
			"img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2219745018,1861674512\u0026fm=58\u0026bpow=475\u0026bpoh=475"
		}, {
			"id": "XL27oeSiwXKAQuF4",
			"name": "浙江大學",
			"img": "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3694367183,2414886214\u0026fm=58\u0026bpow=995\u0026bpoh=995"
		}]
	}
}]
複製代碼

這裏有兩條數據，一個是北京地區的，一個是杭州地區的，正好對應咱們圖上的地區。而後每條json數據裏面包含一個學校list，好比北京地區有清華大學，北京大學，人民大學。而每一個大學對象裏又包含學校id，學校名，學校校徽。編程

有了上面的源數據，接下來咱們就看具體的實現

首先是wxml文件,其實很簡單，就是一個大的列表用來顯示地區，大列表裏面又有一個小的列表用來顯示學校。json

<!--index.wxml-->
<!-- 列表 -->
<block wx:for="{{dataList}}" wx:key="item">
 <view class='item-root'>
  <text class='title'>{{item.item.diqu}}</text>
  <block wx:for="{{item.item.list}}" wx:key="item">
   <view class='img-root' bindtap='goDetail' data-item='{{item}}'>
    <image class='img' src='{{item.img}}'></image>
    <text class='xuexiao'>{{item.name}}</text>
   </view>
  </block>
 </view>
</block>
複製代碼

而後是wxss文件小程序

/* pages/myorder/myorder.wxss */

page {
 background: #fff;
}

.item-root {
 display: flex;
 flex-direction: column;
}

.title {
 width: 100%;
 background: gainsboro;
}

.img-root {
 display: flex;
 margin-left: 15px;
 margin-top: 5px;
 border-bottom: solid 1px gainsboro;
}

.img {
 width: 30px;
 height: 30px;
}

.xuexiao {
 margin: 5px 10px;
 flex: 1;
}
複製代碼

至於如何把源數據json解析並顯示到列表中，能夠參考我以前寫的解析本地json到列表。bash

《列表功能實現和本地json數據解析》：

www.kancloud.cn/java-qiushi…服務器

視頻講解：

edu.csdn.net/course/play…微信

到這裏咱們的地區列表就輕鬆的實現了，再來看下時間軸列表的實現數據結構

小程序時間軸列表實現

仍是先看數據源,咱們拿清華大學爲例app

{
	"_id": "XL27oeSiwXKAQuFR",
	"name": "清華大學",
	"desc": "清華大學始建與1900年，位於北京",
	"img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2693386884,1727296839\u0026fm=58\u0026bpow=1200\u0026bpoh=1200",
	"wangzhi": "http://www.tsinghua.edu.cn",
	"diqu": "北京市海淀區",
	"newsList": [{
		"time": "2019年4月1日",
		"content": "招聘職位：英語老師，數學老師，物理老師",
		"title": "逸夫樓3樓大廳北京新東方專場招聘會"
	}, {
		"time": "2019年3月25日",
		"title": "北京京東專場招聘",
		"content": "招聘崗位：管培生，總裁助理，總經理"
	}]
}

複製代碼

能夠看到咱們是頂部的學校信息，和底部的newsList組成，newsList就是咱們時間軸的具體數據源。下面咱們就來看看實現代碼。 wxml文件以下,註釋裏寫的很清楚了

<view class='top-root'>
 <view class='img-root'>
  <image class='img' src='{{deatil.img}}'></image>
 </view>
 <view class='top-desc-root'>
  <text class='xiangqing'>{{deatil.name}}</text>
  <text class='xiangqing'>網址：{{deatil.wangzhi}}</text>
  <text class='xiangqing'>地區：{{deatil.diqu}}</text>
 </view>
</view>
<!-- 時間軸 -->
<view class="listview-container">
 <block wx:for="{{newsList}}" wx:key="item">
  <view class="playlog-item" bindtap="itemTapped">
   <view class="dotline">
    <!-- 豎線 -->
    <view class="line"></view>
    <!-- 圓點 -->
    <view class="dot"></view>
    <!-- 時間戳 -->
   </view>
   <view class="content">
    <text class="course">{{item.time}}</text>
    <text class="course">{{item.title}}</text>
    <text class="chapter">{{item.content}}</text>
   </view>
  </view>
  <ad unit-id="adunit-5abb45645905fc90" wx:if="{{index % 5 == 4}}"></ad>
 </block>
</view>
複製代碼

wxss樣式文件以下

page {
 background: #fff;
}

.top-root {
 display: flex;
 flex-wrap: nowrap;
 flex-direction: row;
}

.img-root {
 height: 40px;
 width: 40px;
 margin: 5px;
}

.img {
 width: 100%;
 height: 100%;
}

.top-desc-root {
 flex: 1;
 display: flex;
 flex-direction: column;
}

.xiangqing {
 font-size: 28rpx;
 color: #000;
}

/*時間軸*/

/*外部容器*/
.listview-container {
    margin: 10rpx 10rpx;
}

/*行樣式*/
.playlog-item {
    display: flex;
}

/*時間軸*/
.playlog-item .dotline {
    width: 35px;
    position: relative;
}

/*豎線*/
.playlog-item .dotline .line {
    width: 1px;
    height: 100%;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 15px; 
}

/*圓點*/
.playlog-item .dotline .dot {
    width: 11px;
    height: 11px; 
    background: #30ac63;
    position: absolute; 
    top: 10px; 
    left: 10px; 
    border-radius: 50%; 
}

/*時間戳*/
.playlog-item .dotline .time {
    width: 100%;
    position: absolute;
    margin-top: 30px;
    z-index: 99;
    font-size: 12px;
    color: #777;
    text-align: center;
}

/*右側主體內容*/
.playlog-item .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
    margin: 3px 0;
}

/*章節部分*/
.playlog-item .content .chapter {
    font-size: 30rpx;
    line-height: 68rpx;
    color: #444;
    white-space: normal;
    padding-right: 10px;
}

/*課程部分*/
.playlog-item .content .course {
    font-size: 28rpx;
    line-height: 56rpx;
    color: #999;
}
複製代碼

到這裏時間的樣式就已經實現了，咱們接下來要作的就是把數據源json數據解析到頁面上。方式有以下三種