微信小程序开发(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}

swiper-item只能放在swiper组件中
（3）在newspage.wxss中定义显示样式

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