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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

相关技术栈：

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

     

 

以上是 VantUI+Vue移动端H5实现仿微信朋友圈功能 的全部内容， 来源链接： utcz.com/z/375823.html

回到顶部