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、效果圖：