How to create a homepage slideshow in uniapp

Uniapp’s method of making a homepage slideshow: first modify the configuration file; then write the homepage code, the code is []; finally, complete the css code and run it That’s it.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, this method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

How to make a homepage slideshow with uniapp:

1. Modify the configuration file

First we need to set the navigation bar background to black in the page configuration file (pages.json) under the project root directory created earlier, and change the header font color Set to white.

After the configuration is completed, the code is as follows:

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

2. Write the homepage code

You need to add slides to the homepage. We need to use uni- here For the official components of the app, you can click on the link to view the specific usage: swiper. Then, open the directory pages>index>index.vue in sequence, and there is already a part of the code when creating the project in index.vue. This part of the code is useful for us. It said it was useless, so we first deleted the original code. After deletion, it is as shown below:

After deleting the existing code, we started to write the code we wanted. , here we want to add a slideshow function to the homepage, so we start writing the slideshow code here.

A page in uni-app is composed of three parts: template code (view), js code (data, interaction), css code (view style). Here we first write the template code as follows:

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

The second is the js code, because data and user interaction have not been used here yet, so the js code will not be changed here and remains as follows:

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

The last is the css code, as follows:

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

3. Run

and run it into Google Chrome to see the following effect:

Attach the last The code of the entire page:

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

Related free learning recommendations: php programming (video)

The above is the detailed content of How to create a homepage slideshow in uniapp. For more information, please follow other related articles on the PHP Chinese website!