06 案例一,本地生活首頁

2022-09-21 23:42:18 字數 3088 閱讀 8414

首頁效果

共分六步:

新建專案並梳理專案結構

配置導航欄效果

配置 tabbar 效果

實現輪播圖效果

實現九宮格效果

實現布局

1. 新建專案並梳理專案結構

如果想關閉這個黃色警告,開啟project.config.json檔案,找到setting部分,找到checksitemap,這個值預設是true,我們把它改為false,然後重新編譯會發現,黃色警告沒了

刪除預設的兩個不需要的頁面。

2. 配置導航欄效果

3. 配置 tabbar 效果

提取碼:good

4. 實現輪播圖效果

獲取輪播圖資料,這裡的資料是從老師的乙個**上獲取,輪播圖是在首頁展示的,開啟pages/home/home.js檔案

在data節點中宣告乙個輪播圖資料

data: ,
在onload方法後面定義乙個方法獲取輪播圖資料,並在onload方法中呼叫

onload: function (options) ,

getswiperlist()

})},

編譯測試,因為獲取輪播圖資料的方法在onload方法內被呼叫,因此,只要home頁面被載入,該資料就會被請求

測試成功了就將資料寫入到輪播圖陣列中

getswiperlist() )}})

},

渲染輪播圖效果在home.wxml檔案中寫上如下**

編譯:

輪播圖效果初步實現,接下來就是定製樣式,繼續修改**

// wxml部分

// wxss部分

swiper

swiper image

效果

5. 實現九宮格效果

獲取九宮格資料,修改home.js檔案,在data塊新增gridlist陣列,並且增加獲取九宮格資料的方法,然後在onload中呼叫

data: ,

/*** 生命週期函式--監聽頁面載入

*/onload: function (options) ,

// 獲取輪播圖資料

getswiperlist() )}})

},//獲取九宮格資料

getgridlist() )}})

},

資料載入成功

九宮格資料展示分析

最外層我們需要乙個包裹容器,裡面的每一項都是乙個子view,這些子view都需要flex布局,並且每一項都是33.33%的寬度,允許他們換行,最終就會呈現九宮格效果

//wxml部分

}// wxss部分

.grid-list

.grid-item

.grid-item image

.grid-item text

效果

6. 實現布局

//wxml部分

// wxss部分

.img-box

.img-box image

效果

完整**

//js部分,沒有用到的方法讓我去掉了

// pages/home/home.js

page(,

/*** 生命週期函式--監聽頁面載入

*/onload: function (options) ,

// 獲取輪播圖資料

getswiperlist() )}})

},//獲取九宮格資料

getgridlist() )}})

},})//wxml部分

}//wxss部分

swiper

swiper image

.grid-list

.grid-item

.grid-item image

.grid-item text

.img-box

.img-box image

iOS推送(一) 本地推送

以ios8.0和ios10.0兩個版本來建立乙個本地推送 void localpush else 推送建立完畢後,那麼我們便要考慮收到推送後會執行什麼樣的操作,這裡主要介紹處理接收到推送的地方。首先我們要先註冊推送通知。8.0和10.0註冊推送還是很不一樣的。8.0系統註冊推送 if uidevic...

Git學習筆記(一) 本地Git

如果你是初次使用git,就要把自己的使用者名稱和郵箱告訴git,git據此區分提交 的作者。git config global user.name wen ke git config global user.email 306674698 qq.com 檢視使用者名稱和郵箱 gitconfig gl...

GitHub學習筆記一 本地操作部分

安裝過程略,假設你已經註冊好了github,已經有了乙個準備好的程式。我們的一切工作都是基於git shell,與gui客戶端無關。在使用前你先要配置好config中的幾個內容,主要是你自己的個人資訊 git config global user.name cielo sun git config ...