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层:

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

 5、methods(数据处理)

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

6、data返回

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

7、效果图:

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