微信小程序开发之——婚礼邀请函-照片页面(4.4)

一 概述

• “照片”页面任务说明
• “照片”页面功能开发
• 效果图

二 “照片”页面任务说明

• 每一张轮播的图片都占满显示区域，滑动屏幕可以实现图片的纵向切换
• 在右侧纵向显示指示面板，单击圆点可以切换状态
• 在用户无操作时，可以实现自动无缝轮播

三 “照片”页面功能开发

3.1 界面布局(pages/picture/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>

3.2 样式文件(pages/picture/picture.wxss)

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

3.3 功能逻辑文件(pages/picture/picture.js)

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

四 效果图