VantUI+Vue移动端H5实现仿微信朋友圈功能

相关技术栈：

# yarn add vue-photo-preview

# npm i vue-photo-preview

1、 图片预览切换

vue-photo-preview

 

2、滑动（vant-ui）

van-swipe  (轮播控制滑块大小)

 

3、关键点：

1. 获取对应组的图片地址数组
2. 根据图片个数展示不同的布局 （100%，49%，32%   三目运算）没有图片不显示
3. 图片预览切换对应的图集（:preview="index"）图集下的标题 :preview-text="item.content"
4. 滑动右侧超出（ .van-swipe的width设置110%）
5. 数组切割split报错，添加 '’

4、viewc层：

 5、methods（数据处理）

6、data返回

7、效果图：