微信小程序开发阅读&电影小程序之（2）——阅读页面轮播图实现

前言：

今天打开微信官方文档发现轮播图组件更新了两个功能，但是目前暂未启用，估计过几天就能使用了。

---

属性名	类型	默认值	说明
indicator-color	Color	rgba(0,0,0,.3)	指示点颜色 （这个属性目前暂未启用）
indicator-active-color	Color	#000000	当前选中的指示点颜色 （这个属性目前暂未启用）

最终的效果图：

---

代码部分：

下面我们来继续研究代码部分：
wxml部分：

<view>
  <swiper indicator-dots="true" autoplay="true" interval="2000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}"></image>
    </swiper-item>
    </block>
  </swiper>
</view>

注意：swiper-item仅可放置在swiper组件中，宽高自动设置为100%。

---

js部分：

  data:{
    imgUrls: [
      '/images/wx.png',
      '/images/vr.png',
      '/images/iqiyi.png'
    ]
  },

js文件中定义了一个数组，里面存放图片的路径

---

wxss代码：

swiper,swiper image {
  width: 100%;
  height: 500rpx;
}

注意：轮播图组件的宽高样式需要设置在swiper标签上，官方文档中没有说明，只能一个一个试，最后的结论是必须定义在swiper标签。

---

个人微信公众号：

如果我的文章对您有帮助，微信支付宝打赏：