autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" bindchange="change">

swiper.wxss

swiper{

height: 150px;

width:100%;

}

swiper.js

Page({

data: {

imgUrls: [

{{text}}

这里看到两个大括号内套的是从外面传入的数据，然后在里面可以进行简单的逻辑判断，以便于更好的呈现。比如text==null的时候，我们希望呈现的是一个空背景的格子，在有数据的时候我们希望呈现一个含背景的格子，所以

复制代码 代码如下:

{{userInfo.nickName}}

因为两个页面都要包含header.wxml，所以样式文件就不重复写了，这里直接将样式拷贝到app.wxss。

app.wxss代码：

/**app.wxss**/

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname {

color: #aaa;

}

创建index/index2和index/index3

index2.wxml内容：

说明：在这里用到了微信的一些组件，如：view：视图容器；block：不会在页面上留下任何东西，循环时使用这个不会增加额外的标签；template：引用模板；import：导入模板信息，只有导入后才能引用；{{}}：引用数据；wx:for：循环。

模板文件

模板文件其实就是wxml文件

{{city}}

{{curWd.date}} {{curWd.week}}

{{text}}