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- を使用する必要があります。アプリの公式コンポーネントについては、リンクをクリックして特定の使用法を表示できます: スワイパー。次に、ディレクトリーのページ>index>index.vue を順番に開きます。 Index.vue でプロジェクトを作成する際のコードの一部です。この部分のコードは役に立ちます。役に立たないというので、まず元のコードを削除しました。削除後は次のようになります。

既存のコードを削除した後、必要なコードを書き始めました。ここでは、ホームページにスライドショー機能を追加したいので、ここからスライドショーのコードを書き始めます。

uni-app のページは、テンプレート コード (ビュー)、JS コード (データ、インタラクション)、CSS コード (ビュー スタイル) の 3 つの部分で構成されます。ここでは、まず次のようにテンプレート コードを記述します。 # #

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

2 番目は js コードです。ここではデータとユーザー インタラクションがまだ使用されていないため、ここでは js コードは変更されず、次のようになります。

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

最後は、次のような css コード:

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

3.

を実行し、Google Chrome で実行すると、次の効果が確認されます:

ページ全体の最後のコードを添付します:

<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 中国語 Web サイトの他の関連記事を参照してください。