低成本0基礎打造屬於你自己的app——uni-app製作首頁幻燈片技术頭條網

低成本0基礎打造屬於你自己的app——uni-app製作首頁幻燈片

前言

本教程為

前面已經講了：

前面我們用uni-app搭建出了我們的app，但現在的app是什麼內容都沒有的，因此在這篇教程之中我將講解怎麼樣製作首頁幻燈片。

先看一下簡易設計圖：

開始

1、修改配置文件

首先我們需要在前面創建的項目根目錄下面的頁面配置文件中（pages.json）將導航欄背景設置為黑色，並且將頭部字體顏色設置為白色，如圖：

代碼如下：

{
\t
\t"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
\t
\t\t{
\t
\t\t\t"path": "pages/index/index",//首頁文件路徑
\t
\t\t\t"style": {
\t
\t\t\t\t"navigationBarTitleText": "首頁"//首頁頭部標題
\t
\t\t\t}
\t
\t\t}
\t
\t],
\t
\t"globalStyle": {
\t
\t\t"navigationBarTextStyle": "white",//導航欄標題顏色（僅支持 black/white）
\t
\t\t"navigationBarTitleText": "WPApp",//導航欄默認標題
\t
\t\t"navigationBarBackgroundColor": "#000000;",//導航欄背景顏色，此處為黑色
\t
\t\t"backgroundColor": "#F8F8F8"//頁面背景顏色
\t
\t}
\t
}

2、編寫首頁代碼

需要在首頁添加幻燈片，我們這裡需要用到uni-app官方的組件，具體使用方法大家可以百度uni-app組件swiper查看。

隨後，依次打開目錄pages>index>index.vue，而在index.vue中創建項目的時候已經有一部分代碼了，這部分代碼對於我們來說沒什麼用，所以我們先刪除這些原有的代碼，刪除之後如下圖：

刪除完已有的代碼之後，我們開始編寫自己想要的代碼，這裡要在首頁添加一個幻燈片功能，所以這裡開始編寫幻燈片代碼。

在uni-app中一個頁面是有三部分組成的：模板代碼（視圖）、js代碼（數據、交互）、css代碼（視圖樣式），這裡我們先編寫模板代碼如下：

<template>
\t
 <view>
\t
 <view>
\t
 <view>
\t
 <view>
\t
\t\t\t\t 
\t
\t\t\t\t\t
\t
 <swiper>
\t
 
\t
\t\t\t\t\t\t<swiper-item>
\t
\t\t\t\t\t\t\t
\t
 /<swiper-item>
\t
\t\t\t\t\t\t 
\t
 <swiper-item>
\t
\t\t\t\t\t\t\t
\t
 /<swiper-item>
\t
\t\t\t\t\t\t  

\t
 <swiper-item>
\t
\t\t\t\t\t\t\t
\t
 /<swiper-item>
\t
 /<swiper>
\t
 /<view>
\t
 /<view>
\t
 /<view>
\t
 /<view>
\t
/<template>

其次是js代碼，因為這裡暫時還沒有用到數據以及用戶交互，所以這裡就先不改變js代碼，保留如下：

最後是css代碼，如下：

3、運行

運行到谷歌瀏覽器就可以看到如下效果：

最後附上整個頁面的代碼：

<template>
 <view>
 <view>
 <view>
 <view>
\t\t\t\t 
\t\t\t\t\t
 <swiper>
 
\t\t\t\t\t\t<swiper-item>
\t\t\t\t\t\t\t
 /<swiper-item>
\t\t\t\t\t\t 
 <swiper-item>
\t\t\t\t\t\t\t
 /<swiper-item>
\t\t\t\t\t\t 
 <swiper-item>
\t\t\t\t\t\t\t
 /<swiper-item>
 /<swiper>
 /<view>
 /<view>
 /<view>
 /<view> 

/<template>