規矩先看效果圖

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

我們在解析數據之前，要先看下數據結構

[{
 "_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文件,其實很簡單，就是一個大的列表用來顯示地區，大列表里面又有一個小的列表用來顯示學校。

<!--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到列表。

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

https://www.kancloud.cn/java-qiushi/xiaochengxu/767304

視頻講解：

https://edu.csdn.net/course/play/9531/202161

到這里我們的地區列表就輕松的實現了，再來看下時間軸列表的實現

小程序時間軸列表實現

還是先看數據源,我們拿清華大學為例

{

"_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數據解析到頁面上。方式有如下三種

• 1，把json放本地
• 2，把json導入到云開發數據
• 3，把json放到我們自己的服務器后臺
• 下面我簡單已放在云開發數據庫并請求解析為例

先看下我云開發后臺數據庫

然后寫個云函數去獲取云開發數據庫里的json數據源，就是上圖紅色框里的數據

可以看到我們成功的請求到了云數據庫里的數據到本地。并成功解析并渲染到頁面上了。是不是很簡單。

當然，實現這些你還需要有一定的云開發知識。

同樣為大家提供了云開發視頻講解：https://edu.csdn.net/course/detail/9604

有任何關于編程的問題都可以私信我，我看到后會及時解答。

編程小石頭，碼農一枚，非著名全棧開發人員。分享自己的一些經驗，學習心得，希望后來人少走彎路，少填坑。

編程小石頭，為分享干貨而生！據說，每個年輕上進，顏值又高的互聯網人都關注了編程小石頭。

avaScript 對象

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...

此外，JavaScript 允許自定義對象。

所有事物都是對象

JavaScript 提供多個內建對象，比如 String、Date、Array 等等。 對象只是帶有屬性和方法的特殊數據類型。

• 布爾型可以是一個對象。

• 數字型可以是一個對象。

• 字符串也可以是一個對象

• 日期是一個對象

• 數學和正則表達式也是對象

• 數組是一個對象

• 甚至函數也可以是對象

JavaScript 對象

對象只是一種特殊的數據。對象擁有屬性和方法。

訪問對象的屬性

屬性是與對象相關的值。

訪問對象屬性的語法是：

objectName.propertyName

這個例子使用了 String 對象的 length 屬性來獲得字符串的長度：

var message="Hello World!";

var x=message.length;

在以上代碼執行后，x 的值將是：

12

訪問對象的方法

方法是能夠在對象上執行的動作。

您可以通過以下語法來調用方法：

objectName.methodName()

這個例子使用了 String 對象的 toUpperCase() 方法來將文本轉換為大寫：

var message="Hello world!";

var x=message.toUpperCase();

在以上代碼執行后，x 的值將是：

HELLO WORLD!

創建 JavaScript 對象

通過 JavaScript，您能夠定義并創建自己的對象。

創建新對象有兩種不同的方法：

• 定義并創建對象的實例

• 使用函數來定義對象，然后創建新的對象實例

創建直接的實例

這個例子創建了對象的一個新實例，并向其添加了四個屬性：

實例

person=new Object();

person.firstname="John";

person.lastname="Doe";

person.age=50;

person.eyecolor="blue";

嘗試一下 ?

替代語法（使用對象 literals）：

實例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

嘗試一下 ?

使用對象構造器

本例使用函數來構造對象：

實例

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

嘗試一下 ?

在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是指向該函數所屬的對象（運行時）

創建 JavaScript 對象實例

一旦您有了對象構造器，就可以創建新的對象實例，就像這樣：

var myFather=new person("John","Doe",50,"blue");

var myMother=new person("Sally","Rally",48,"green");

把屬性添加到 JavaScript 對象

您可以通過為對象賦值，向已有對象添加新屬性：

假設 personObj 已存在 - 您可以為其添加這些新屬性：firstname、lastname、age 以及 eyecolor：

person.firstname="John";

person.lastname="Doe";

person.age=30;

person.eyecolor="blue";

x=person.firstname;

T在以上代碼執行后，x 的值將是：

John

把方法添加到 JavaScript 對象

方法只不過是附加在對象上的函數。

在構造器函數內部定義對象的方法：

function person(firstname,lastname,age,eyecolor)
{
 this.firstname=firstname;
 this.lastname=lastname;
 this.age=age;
 this.eyecolor=eyecolor;
 this.changeName=changeName;
 function changeName(name)
 {
 this.lastname=name;
 }
}

changeName() 函數 name 的值賦給 person 的 lastname 屬性。

現在您可以試一下：

myMother.changeName("Doe");

嘗試一下 ?

JavaScript 類

JavaScript 是面向對象的語言，但 JavaScript 不使用類。

在 JavaScript 中，不會創建類，也不會通過類來創建對象（就像在其他面向對象的語言中那樣）。

JavaScript 基于 prototype，而不是基于類的。

JavaScript for...in 循環

JavaScript for...in 語句循環遍歷對象的屬性。

語法

for (variable in object)
{
 執行的代碼……
}

注意： for...in 循環中的代碼塊將針對每個屬性執行一次。

實例

循環遍歷對象的屬性：

實例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

{

txt=txt + person[x];

}

JavaScript Number 對象

JavaScript 只有一種數字類型。

可以使用也可以不使用小數點來書寫數字。

JavaScript 數字

JavaScript 數字可以使用也可以不使用小數點來書寫：

實例

var pi=3.14; // 使用小數點

var x=34; // 不使用小數點

極大或極小的數字可通過科學（指數）計數法來寫：

實例

var y=123e5; // 12300000

var z=123e-5; // 0.00123

所有 JavaScript 數字均為 64 位

JavaScript 不是類型語言。與許多其他編程語言不同，JavaScript 不定義不同類型的數字，比如整數、短、長、浮點等等。

在JavaScript中，數字不分為整數類型和浮點型類型，所有的數字都是由 浮點型類型。JavaScript采用IEEE754標準定義的64位浮點格式表示數字，它能表示最大值為±1.7976931348623157 x 10308，最小值為±5 x 10 -324

精度

整數（不使用小數點或指數計數法）最多為 15 位。

實例

varx=999999999999999; // x 為 999999999999999vary=9999999999999999; // y 為 10000000000000000

嘗試一下 ?

小數的最大位數是 17，但是浮點運算并不總是 100% 準確：

實例

var x=0.2+0.1; // 輸出結果為 0.30000000000000004

嘗試一下 ?

八進制和十六進制

如果前綴為 0，則 JavaScript 會把數值常量解釋為八進制數，如果前綴為 0 和 "x"，則解釋為十六進制數。

實例

var y=0377;

var z=0xFF;

嘗試一下 ?

默認情況下，JavaScript 數字為十進制顯示。

但是你可以使用 toString() 方法 輸出16進制、8進制、2進制。

實例

var myNumber=128;

myNumber.toString(16); // 返回 80

myNumber.toString(8); // 返回 200

myNumber.toString(2); // 返回 10000000

無窮大（Infinity）

當數字運算結果超過了JavaScript所能表示的數字上限（溢出），結果為一個特殊的無窮大（infinity）值，在JavaScript中以Infinity表示。同樣地，當負數的值超過了JavaScript所能表示的負數范圍，結果為負無窮大，在JavaScript中以-Infinity表示。無窮大值的行為特性和我們所期望的是一致的：基于它們的加、減、乘和除運算結果還是無窮大（當然還保留它們的正負號）。

實例

myNumber=2;

while (myNumber!=Infinity)

{

myNumber=myNumber*myNumber; // 重復計算直到 myNumber 等于 Infinity

}

除以0也產生了無限:

實例

var x=2/0;

var y=-2/0;

NaN - 非數字值

NaN 屬性是代表非數字值的特殊值。該屬性用于指示某個值不是數字。可以把 Number 對象設置為該值，來指示其不是數字值。

你可以使用 isNaN() 全局函數來判斷一個值是否是 NaN 值。

實例

var x=1000 / "Apple";

isNaN(x); // 返回 true

var y=100 / "1000";

isNaN(y); // 返回 false

除以0是無窮大，無窮大是一個數字:

實例

var x=1000 / 0;

isNaN(x); // 返回 false

數字可以是數字或者對象

數字可以私有數據進行初始化，就像 x=123;

JavaScript 數字對象初始化數據， var y=new Number(123);

實例

var x=123;

var y=new Number(123);

typeof(x) // 返回 Number

typeof(y) // 返回 Object

實例

var x=123;

var y=new Number(123);

(x===y) // 為 false，因為 x 是一個數字，y 是一個對象

數字屬性

• MAX_VALUE

• MIN_VALUE

• NEGATIVE_INFINITY

• POSITIVE_INFINITY

• NaN

• prototype

• constructor

數字方法

• toExponential()

• toFixed()

• toPrecision()

• toString()

• valueOf()

JavaScript 字符串（String） 對象

String 對象用于處理已有的字符塊。

JavaScript 字符串

一個字符串用于存儲一系列字符就像 "John Doe".

一個字符串可以使用單引號或雙引號：

實例

var carname="Volvo XC60";

var carname='Volvo XC60';

你使用位置（索引）可以訪問字符串中任何的字符：

實例

var character=carname[7];

字符串的索引從零開始, 所以字符串第一字符為 [0],第二個字符為 [1], 等等。

你可以在字符串中使用引號，如下實例：

實例

var answer="It's alright";

var answer="He is called 'Johnny'";

var answer='He is called "Johnny"';

或者你可以在字符串中使用轉義字符(\)使用引號：

實例

var answer='It\'s alright';

var answer="He is called \"Johnny\"";

嘗試一下 ?

字符串（String）

字符串（String）使用長度屬性length來計算字符串的長度：

實例

var txt="Hello World!";

document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";

document.write(txt.length);

嘗試一下 ?

在字符串中查找字符串

字符串使用 indexOf() 來定位字符串中某一個指定的字符首次出現的位置：

實例

var str="Hello world, welcome to the universe.";

var n=str.indexOf("welcome");

嘗試一下 ?

如果沒找到對應的字符函數返回-1

lastIndexOf() 方法在字符串末尾開始查找字符串出現的位置。

內容匹配

match()函數用來查找字符串中特定的字符，并且如果找到的話，則返回這個字符。

實例

var str="Hello world!";

document.write(str.match("world") + "<br>");

document.write(str.match("World") + "<br>");

document.write(str.match("world!"));

嘗試一下 ?

替換內容

replace() 方法在字符串中用某些字符替換另一些字符。

實例

str="Please visit Microsoft!"

var n=str.replace("Microsoft","w3cschool");

嘗試一下 ?

字符串大小寫轉換

字符串大小寫轉換使用函數 toUpperCase() / toLowerCase():

實例

var txt="Hello World!"; // String

var txt1=txt.toUpperCase(); // txt1 文本會轉換為大寫

var txt2=txt.toLowerCase(); // txt2 文本會轉換為小寫

嘗試一下 ?

字符串轉為數組

字符串使用split()函數轉為數組:

實例

txt="a,b,c,d,e" // String

txt.split(","); // 使用逗號分隔

txt.split(" "); // 使用空格分隔

txt.split("|"); // 使用豎線分隔

嘗試一下 ?

特殊字符

Javascript 中可以使用反斜線（\）插入特殊符號，如：撇號,引號等其他特殊符號。

查看如下 JavaScript 代碼:

var txt="We are the so-called "Vikings" from the north.";

document.write(txt);

在JavaScript中，字符串的開始和停止使用單引號或雙引號。這意味著，上面的字符串將被切成： We are the so-called

解決以上的問題可以使用反斜線來轉義引號：

var txt="We are the so-called \"Vikings\" from the north.";

document.write(txt);

JavaScript將輸出正確的文本字符串：We are the so-called "Vikings" from the north.

下表列出其他特殊字符，可以使用反斜線轉義特殊字符：

字符串屬性和方法

屬性:

• length

• prototype

• constructor

方法:

• charAt()

• charCodeAt()

• concat()

• fromCharCode()

• indexOf()

• lastIndexOf()

• match()

• replace()

• search()

• slice()

• split()

• substr()

• substring()

• toLowerCase()

• toUpperCase()

• valueOf()

JavaScript Date（日期） 對象

日期對象用于處理日期和時間。

在線實例

<a target="_blank" 返回當日的日期和時間<="" a="" style="margin: 0px; padding: 0px; color: rgb(100, 133, 76); text-decoration-line: underline; transition-duration: 0.2s; transition-property: opacity;">

如何使用 Date() 方法獲得當日的日期。

<a target="_blank" 返回當日的日期和時間<="" a="" style="margin: 0px; padding: 0px; color: rgb(100, 133, 76); transition-duration: 0.2s; transition-property: opacity; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; font-size: 12px; white-space: normal;">

<a target="_blank" 返回當日的日期和時間<="" a="" style="margin: 0px; padding: 0px; color: rgb(100, 133, 76); text-decoration-line: underline; transition-duration: 0.2s; transition-property: opacity;">getFullYear()

使用 getFullYear() 獲取年份。

getTime()

getTime() 返回從 1970 年 1 月 1 日至今的毫秒數。

setFullYear()

如何使用 setFullYear() 設置具體的日期。

toUTCString()

如何使用 toUTCString() 將當日的日期（根據 UTC）轉換為字符串。

getDay()

如何使用 getDay() 和數組來顯示星期，而不僅僅是數字。

Display a clock

如何在網頁上顯示一個鐘表。

完整的 Date 對象參考手冊

我們提供 JavaScript Date 對象參考手冊，其中包括所有可用于日期對象的屬性和方法。JavaScript Date 對象參考手冊。

該手冊包含了對每個屬性和方法的詳細描述以及相關實例。

創建日期

Date 對象用于處理日期和時間。

可以通過 new 關鍵詞來定義 Date 對象。以下代碼定義了名為 myDate 的 Date 對象：

有四種方式初始化日期:

new Date() // 當前日期和時間

new Date(milliseconds) //返回從 1970 年 1 月 1 日至今的毫秒數

new Date(dateString)

new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的參數大多數都是可選的，在不指定的情況下，默認參數是0。

<p從 1970="" 年="" 1="" 月="" 日通用一天計算為86,400,000毫秒<="" p="" style="color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; font-size: 12px; white-space: normal;">

實例化一個日期的一些例子：

var today=new Date()

var d1=new Date("October 13, 1975 11:13:00")

var d2=new Date(79,5,24)

var d3=new Date(79,5,24,11,33,0)

設置日期

通過使用針對日期對象的方法，我們可以很容易地對日期進行操作。

在下面的例子中，我們為日期對象設置了一個特定的日期 (2010 年 1 月 14 日)：

var myDate=new Date();

myDate.setFullYear(2010,0,14);

在下面的例子中，我們將日期對象設置為 5 天后的日期：

var myDate=new Date();

myDate.setDate(myDate.getDate()+5);

注意: 如果增加天數會改變月份或者年份，那么日期對象會自動完成這種轉換。

兩個日期比較

日期對象也可用于比較兩個日期。

下面的代碼將當前日期與 2100 年 1 月 14 日做了比較：