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

一 概述

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

二 “照片”页面任务说明

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

三 “照片”页面功能开发

3.1 界面布局(pages/picture/picture.wxml)

1
2
3
4
5
<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)

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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 () {

}
})

四 效果图