uniapp怎麼做首頁投影片

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中文網其他相關文章！