uniapp插件showing使用文档-alger

Vue

uniapp 图片预览插件链接：https://ext.dcloud.net.cn/plugin?id=6887

showimg 使用说明

  1. 下载压缩包并解压到页面目录中

  2. 在 pages.json 中添加页面

    {
  "path": "pages/showimg/showimg",
  "style": {
    "navigationBarTextStyle": "white",
    "app-plus": {
      "animationType": "fade-in",
      "animationDuration": 300
    }
  }
}

3.跳转到页面并传递参数

imgs为图片列表 本地路径和网络路径均可
current为索引
uni.navigateTo({
  url:
    "/pages/common/showimg/showimg?imgs=" +
    JSON.stringify(imgs) +
    "&current=" +
    current,
  animationType: "fade-in",
})

可以封装在 Vue.prototype 中

//main.js
Vue.prototype.$showimg = function (data) {
  uni.navigateTo({
    url:
      "/pages/common/showimg/showimg?imgs=" +
      JSON.stringify(data.imgs) +
      "&current=" +
      data.current,
    animationType: "fade-in",
  })
}