小程序项目

代码涉及的文件有

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. static/images（小程序根目录下新建目录：static，static新建子目录：images，用于存放静态图片）

app.json

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor": "#1c424d",
    "navigationBarTitleText": "AITO",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
1
2
3
4
5
6
7
8
9
10
11
12

pages/index/index.wxml

<view class="indexContainer">
  <swiper class="banners" 	indicator-dots 	indicator-color="#1c424d" indicator-active-color="ivory">
    <swiper-item>
      <image src="/static/images/aito-m5.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/static/images/m5.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/static/images/aito-wenjie-m5.jpg"></image>
    </swiper-item>
  </swiper>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

pages/index/index.wxss

.banners{
  width: 100%;
  height: 420rpx;
}
.banners image{
  width: 100%;
  height: 100%;
}
1
2
3
4
5
6
7
8

swiper组件

swiper是一个滑块视图容器，里面只可放置swiper-item。

swiper 组件有很多属性，常用的有：

• indicator-dots，是否显示面板指示点。布尔值，默认是false，即默认不显示面板指示点。
• indicator-color，指示点颜色。可以是关键字，也可以是十六进制颜色，默认是rgba(0,0,0,.3)。
• indicator-active-color，当前选中的指示点颜色，默认是#000000。