微信小程序开发(5)-新闻页面制作之banner
如图：
分四步：
1.在newspage.js中准备图片数据
bannerUrl:['/images/01.png','/images/02.png','/images/03.png'] //要多少张，定义多少张
2.在newspage.wxml定义显示
<!--banner广告区域-->
<view class="banner">
<swiper indicator-dots="true" autoplay="true" interval="5000" indicator-active-color="#2089DC" circular="true" bindchange="EventHandle" >
<block wx:for="{{bannerUrl}}">
<swiper-item>
<image src="{{item}}" style="width:100%;"></image>
</swiper-item>
</block>
</swiper>
</view>
注意，主要用到swiper组件，其具体定义如下：
swiper
滑块视图容器。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | 1.1.0 |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | 1.1.0 |
| autoplay | Boolean | false | 是否自动切换 | |
| current | Number | 0 | 当前所在页面的 index | |
| interval | Number | 5000 | 自动切换时间间隔 | |
| duration | Number | 500 | 滑动动画时长 | |
| circular | Boolean | false | 是否采用衔接滑动 | |
| vertical | Boolean | false | 滑动方向是否为纵向 | |
| bindchange | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |
（3）在newspage.wxss中定义显示样式
(4)在newspage.js中写事件触发函数