相册

介绍

项目中 影视、影人、角色 都有相册功能，所以将相册功能整合为一个页面共用。

实现解析

点击小图时，显示由 swiper 封装的 photo-swiper 组件，同时路由地址后缀增加 #preview?index=${index} ，以实现点击返回按钮时只关闭预览页面。其中 index 为该小图在图片列表中的索引值，该索引值为 swiper 需要设置显示的索引。

和大多列表类型页面一样，会使用到 getInfiniteData 混入功能，没有什么技术问题在里面。
小程序有 wx.previewImage 方法预览图片，可以直接调用预览。

图片预览

data: {
	list: []
},

// 图片预览方法
preview(e) {
	const index = e.currentTarget.dataset.index;	// 当前点击图片的索引
	// 当前图片所有大图地址集合
	const urls = this.data.list.map(p => p.url.replace(/@mini/, '@larger')); 
	const current = urls[index];	 // 当前点击的图片链接

	wx.previewImage({
		current,
		urls
	})
}