教你如何快速搭建百度智能小程序（四）：制作首页轮显图banner

发布于 2023-12-12 11:45:32 浏览 297

适用环境：

型号：台式机
系统：win10
版本：百度开发者工具 4.8.2

问题解析：

1、准备轮显图
事先准备好两张16:9的banner图片放入项目文件夹中的images文件夹下。
▼

事先准备好两张16:9的banner图片放入项目文件夹中的images文件夹下。 2、打开首页swan和css文件
双击开发工具中pages文件夹里的index.swan和index.css文件。
▼

双击开发工具中pages文件夹里的index.swan和index.css文件。 3、在swan文件中输入代码
在index.swan编辑框中输入banner代码并保存。

<!--index.swan文件-->
<view class="cont">
    <swiper
        class="banner"
        indicator-dots="true"
        indicator-color="rgba(0,0,0,0.3)"
        ndicator-active-colo="#fff"
        autoplay="true"
        interval="3000"
    >
        <swiper-item class="banneritem" >
            <image class="bannerimg" src="/images/banner1.jpg"></image>
        </swiper-item>
        <swiper-item class="banneritem" >
            <image class="bannerimg" src="/images/banner2.jpg"></image>
        </swiper-item>    
    </swiper>
</view>
1.view标签：视图组件，相当于html中的div容器。
2.swiper标签：百度小程序自带的轮显图组件。
3.swiper-item标签：组件内部的子项，用来存放图片或文字。
4.image标签：图片组件，类似html中的img标签。image 组件默认宽度 300px 、高度 225px，在使用的过程中需要对宽高重新设置。

▼

在index.swan编辑框中输入banner代码并保存。 4、在css文件中输入样式代码
在index.css编辑框中输入banner样式代码并保存。

<!--index.css文件-->
.cont{ width: 100%; height:auto; display: flex; flex-direction: column; box-sizing: border-box;}
.banner,.bannerimg{ width:100%; height: 13rem; }

▼