uniapp做首頁投影片的方法：先修改設定檔；然後寫首頁程式碼，程式碼為【
】；最後完成css程式碼並執行即可。
本教學操作環境：windows7系統、uni-app2.5.1版本，此方法適用於所有品牌電腦。
推薦（免費）：uni-app開發教學
uniapp做首頁投影片的方法：
1、修改設定檔
首先我們需要在前面建立的專案根目錄下面的頁面設定檔中（pages.json）將導覽列背景設定為黑色，並且將頭部字體顏色設定為白色。
配置完成之後程式碼如下：
{
"pages": [ //pages数组中第一项表示应用启动页，
{
"path": "pages/index/index",//首页文件路径
"style": {
"navigationBarTitleText": "首页"//首页头部标题
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",//导航栏标题颜色（仅支持 black/white）
"navigationBarTitleText": "WPApp",//导航栏默认标题
"navigationBarBackgroundColor": "#000000;",//导航栏背景颜色，此处为黑色
"backgroundColor": "#F8F8F8"//页面背景颜色
}
}2、寫首頁程式碼
需要在首頁新增投影片，我們這裡需要用到uni- app官方的元件，具體使用方法大家可以點擊連結查看：swiper隨後，依序開啟目錄pages>index>index.vue，而在index.vue中建立專案的時候已經有一部分程式碼了，這部分程式碼對於我們來說沒什麼用，所以我們先刪除這些原有的程式碼，刪除之後如下圖：
#刪除完已有的程式碼之後，我們開始寫自己想要的程式碼，這裡要在首頁新增一個幻燈片功能，所以這裡開始編寫幻燈片程式碼。
在uni-app中一個頁面是有三個部分組成的：模板程式碼（視圖）、js程式碼（資料、互動）、css程式碼（視圖樣式），這裡我們先寫模板程式碼如下：
<template>
<view>
<view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<!-- 一组幻灯片代码开始，用到组件swiper -->
<!-- indicator-dots autoplay interval……：组件相关属性，具体可以查看官网说明 -->
<swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
<!-- 每组幻灯片中的子项目 1 -->
<swiper-item>
<!-- 此处放内容，可以是图片，也可是图片加文字 -->
</swiper-item>
<!-- 每组幻灯片中的子项目 2 -->
<swiper-item>
<!-- 此处放内容，可以是图片，也可是图片加文字 -->
</swiper-item>
<!-- 每组幻灯片中的子项目 3 -->
<swiper-item>
<!-- 此处放内容，可以是图片，也可是图片加文字 -->
</swiper-item>
</swiper>
</view>
</view>
</view>
</view>
</template>其次是js程式碼，因為這裡暫時還沒有用到資料以及使用者交互，所以這裡就先不改變js程式碼，保留如下：
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>最後是css程式碼，如下：
<style>
/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
swiper-item{
background-color: #f8f8f8;
}
</style>3、執行
執行到Google瀏覽器就可以看到如下效果：
最後附上整個頁面的程式碼：
<template>
<view>
<view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<!-- 一组幻灯片代码开始，用到组件swiper -->
<!-- indicator-dots autoplay interval……：组件相关属性，具体可以查看官网说明 -->
<swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
<!-- 每组幻灯片中的子项目 1 -->
<swiper-item>
<!-- 此处放内容，可以是图片，也可是图片加文字 -->
</swiper-item>
<!-- 每组幻灯片中的子项目 2 -->
<swiper-item>
<!-- 此处放内容，可以是图片，也可是图片加文字 -->
</swiper-item>
<!-- 每组幻灯片中的子项目 3 -->
<swiper-item>
<!-- 此处放内容，可以是图片，也可是图片加文字 -->
</swiper-item>
</swiper>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
swiper-item{
background-color: #f8f8f8;
}
</style>相關免費學習推薦：php程式設計（影片）
以上是uniapp怎麼做首頁投影片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
