（三）微信小程序：焦點輪播圖功能

實現焦點輪播圖（針對的是news頁面）

　　1.在news的page文件中設置頁面

　　　　目的：為了讓news的page頁面和index登錄頁面達到統一的標題欄效果

　　　　

 

 　　　　采取方案：此時添加成全局樣式app.json為如圖：

　　　　

 

 　　2.正式設計新聞的輪播圖

　　　　　　1.導火線：設計輪播圖需要采用API中的swiper組件，如圖：

　　　　　　

 

 　　　　　　

　　　　　　2.由API中所提及的屬性，設置屬性值即可實現輪播功能，以下為初步代碼：

<!--pages/news/news.wxml-->
<swiper indicator-dots="true" indicator-color="#109D59" 
  autoplay="true" circular="true">
  <swiper-item>
    <image class="swiperimg" src="../../image/banner1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image class="swiperimg" src="../../image/banner2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image class="swiperimg" src="../../image/banner3.jpg"></image>
  </swiper-item>
</swiper>

　　　　　　ps：從代碼中可以發現，屬性聚集在swiper標簽中，這是不符合編碼規范的，因此需要在news.js中進行聲明：

　　　　　　　　

 

 

　　　　　　3.news.js代碼定義數據

Page({

  /**
   * 頁面的初始數據
   */
  data: {
      swiperOptions:{
          indicatorDots:true,
          indicatorColor:"#109D59",
          autoplay:true,
          circular:true,
          imgUrl:[
            "../../image/banner1.jpg",
            "../../image/banner2.jpg",
            "../../image/banner3.jpg"
          ]
      }
     
  }
}）

　　　　　　4.news.wxml代碼進行圖片輪播

<!--pages/news/news.wxml-->
<swiper indicator-dots="{{ swiperOptions.indicatorDots }}"
 indicator-color="{{ swiperOptions.indicatorColor }}" 
  autoplay="{{ swiperOptions.autoplay }}" 
   circular="{{ swiperOptions.circular }}">

  <block wx:for="{{ swiperOptions.imgUrl }}" 
    wx:for-index="idx" wx:for-item="item"
    wx:key="{{ idx }}">
    <swiper-item>
      <image class="swiperimg" src="{{ item }}"></image>
    </swiper-item>
  </block>
 
</swiper>

　　　　　　代碼解析：1.采用<block wx:for="{{ 獲取的數組 }}">標簽實現遍歷;

　　　　　　　　　　　2.wx:for-index="idx"和wx:for-item="item"聲明后，才能添加wx:key="{{ idx }}"　　　　

　　　3.達成效果：

　　　　　　

 

 第三節輪播圖功能已實現，下一節進行新聞列表渲染~