微信小程序开发(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-dotsBooleanfalse是否显示面板指示点 indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0indicator-active-colorColor#000000当前选中的指示点颜色1.1.0autoplayBooleanfalse是否自动切换 currentNumber0当前所在页面的 index intervalNumber5000自动切换时间间隔 durationNumber500滑动动画时长 circularBooleanfalse是否采用衔接滑动 verticalBooleanfalse滑动方向是否为纵向 bindchangeEventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}swiper-item只能放在swiper组件中

（3）在newspage.wxss中定义显示样式

(4)在newspage.js中写事件触发函数