（三）微信小程序：焦点轮播图功能

　　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>

View Code