大数据综合课程设计（六）

窗口配置和轮播图的实现

在桌面的code文件中新建一个文件夹：

在微信开发者工具中用AppId新建一个小程序

打开小程序后进入node/你干嘛中删除page中的所有文件夹

在微信开发者工具中删除除这5个外所有的文件

在app.js中代码清空，在app.json中删掉window下的所有代码包含window，和pages中路径，最后剩下为

{

  "pages": [

  ],

  "style": "v2",

  "sitemapLocation": "sitemap.json",

  }

}

在app.wsml（全局样式）中清空所有代码。

首先创建一个页面，在pages下创建一个文件index之后新建一个page，

设置窗口颜色在全局（index.json）而不再局部（index.json）

输入代码：

  "window":{

    "navigationBarBackgroundColor": "#d43c33",

    "navigationBarTextStyle":"white",

    "navigationBarTitleText": "硅谷音乐"

  }

先在code文件夹下新建一个文件夹，插入带图片的文件夹

然后再inde.wxml中输入代码

<view>

  <!--轮播图区域-->

  <swiper class="banana" >

    <swiper-item>

      <image src="/stack/images/lena.png"></image>//这里的

    </swiper-item>

  </swiper>

</view>

之后实现滚动

<view >

  <!--轮播图区域-->

  <swiper class="banana" >

    <swiper-item>

      <image src="/stack/images/lena.png"></image>

    </swiper-item>

    <swiper-item>

      <image src="/stack/images/lena.png"></image>

    </swiper-item>

    <swiper-item>

      <image src="/stack/images/lena.png"></image>

    </swiper-item>

  </swiper>

</view>

在index.wxss中输入代码，更改图片大小：

/* pages/index/index.wxss */

.banana{

  width: 100%;

  height: 300rpx;

}

.banana image{

  width: 100%;

  height: 100%;

}

图片滚动时的点的颜色在index.wxml中实现

  <swiper class="banana">处代码变为：

  <swiper class="banana" indicator-dots indicator-color="ivory" indicator-active-color="d43c33">

完成窗口配置和轮播图的实现。