So erstellen Sie eine Homepage-Diashow in Uniapp

So erstellen Sie eine Homepage-Diashow: Ändern Sie zuerst die Konfigurationsdatei und schreiben Sie dann den Homepage-Code. Der Code lautet []. Vervollständigen Sie schließlich den CSS-Code Führen Sie es aus.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

So erstellen Sie eine Homepage-Diashow mit Uniapp:

1. Ändern Sie die Konfigurationsdatei

Zuerst müssen wir die Seite im Projektstammverzeichnis erstellen Legen Sie zuvor in der Konfigurationsdatei (pages.json) den Hintergrund der Navigationsleiste auf Schwarz und die Schriftfarbe der Kopfzeile auf Weiß fest.

Nachdem die Konfiguration abgeschlossen ist, lautet der Code wie folgt:

{
"pages": [ //pages数组中第一项表示应用启动页，
{
"path": "pages/index/index",//首页文件路径
"style": {
"navigationBarTitleText": "首页"//首页头部标题
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",//导航栏标题颜色（仅支持 black/white）
"navigationBarTitleText": "WPApp",//导航栏默认标题
"navigationBarBackgroundColor": "#000000;",//导航栏背景颜色，此处为黑色
"backgroundColor": "#F8F8F8"//页面背景颜色
}
}

2. Schreiben Sie den Homepage-Code

Sie müssen hier die offizielle Uni-App-Komponente hinzufügen Sie können auf den Link klicken, um die spezifische Verwendungsmethode anzuzeigen: Swiper, dann öffnen Sie das Verzeichnis seiten>index>index.vue, und beim Erstellen des Projekts befindet sich bereits ein Teil des Codes in index.vue ist für uns nutzlos, also löschen wir zuerst diese Originalcodes und dann Wie unten gezeigt:

Nachdem wir den vorhandenen Code gelöscht haben, beginnen wir mit dem Schreiben des gewünschten Codes. Hier möchten wir eine Diashow-Funktion hinzufügen der Homepage, also beginnen wir hier mit dem Schreiben des Diashow-Codes.

Eine Seite in der Uni-App besteht aus drei Teilen: Vorlagencode (Ansicht), JS-Code (Daten, Interaktion), CSS-Code (Ansichtsstil). Hier schreiben wir zunächst den Vorlagencode wie folgt:

<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>

Der zweite ist js-Code, da hier noch keine Daten und Benutzerinteraktionen verwendet werden. Daher wird der js-Code hier nicht geändert. Behalten Sie ihn wie folgt bei:

<script>
export default {
data() {
return {
}
},
onLoad() {
 
},
methods: {
 
}
}
</script>

Der letzte ist der CSS-Code wie folgt:

<style>
/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
swiper-item{
background-color: #f8f8f8;
}
</style>

3

Run to Google Browse Sie können den folgenden Effekt sehen, wenn Sie das Tool verwenden:

Zum Schluss fügen Sie den Code der gesamten Seite hinzu:

<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>

Verwandte kostenlose Lernempfehlungen: php-Programmierung (Video)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Homepage-Diashow in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!