"婚礼邀请函"小程序：照片页面

任务分析

采用纵向轮播的方式展示图片，

实现纵向轮播图

准备图片路径

picture.js:

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      '/images/timg1.jpg',
      '/images/timg2.jpg',
      '/images/timg3.jpg',
      '/images/timg4.jpg'
    ]
  },

编写轮播代码

picture.wxml:

<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
  <swiper-item wx:for="{{imgUrls}}" wx:key="*this">
    <image src="{{item}}" mode="aspectFill" />
  </swiper-item>
</swiper>

编写轮播样式

picture.wxss:

swiper {
  height: 100vh;
}

image {
  width: 100vw;
  height: 100vh;
}

效果图

..