微信小程序的中大图预览

遇到的问题

点击轮播图，预览图片。但是无法提供符合条件的参数。
微信小程序提供了方法， wx.previewImage 。可在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。官网文档

previewImage语法

wx.previewImage({
current, // 当前显示图片的http链接
urls // 需要预览的图片http链接列表,这个是数组
});

对数组中的数据进行筛选

js中的代码：

// pages/goods_detai/goods_detail.js

import { request } from "../../request/request.js";
import regeneratorRuntime from "../../lib/runtime/runtime";
Page({
  data: {
    GoodsPics:[], //商品轮播图
  },
  onShow: function () {
    this.getGoodsDetail("2070002");
  },
  async getGoodsDetail(goodsId){
    const res2=await request({url:"/SearchGoodsPicsBygoodsId",data:{goodsId}});
   
    this.setData({
      GoodsPics:res2.data
    });

  },
  
  // 点击轮播图 放大预览
  handlePreviewImage(e){
    const urls=this.data.GoodsPics.map(v=>v.picsUrl);
    const current=e.currentTarget.dataset.url;
    this.data.GoodsPics.forEach(i => {
      console.log(i);
    });
    for(var i=0;i<this.data.GoodsPics.length;i++){
      console.log(this.data.GoodsPics[i].picsId);
     //deviceInfos.push(dataLists[i].device);
     //itemLists.push(dataLists[i].item);
    }
    
    //console.log(current); 当前图片的http链接
    console.log(urls);
    /*
    wx.previewImage({
      current,  // 当前显示图片的http链接
      urls  // 需要预览的图片http链接列表,这个是数组
    });
    
    */  
    
  }
  

这是GoodsPics数组里的原始数据

对应三个输出：

解析

• 第一种：使用foreach循环。在i后面加上.pics，跟第二种就一样了
• 第二种：最简单的for，代码量相对大一点
• 第三种，使用数组的map方法，筛选出特定的部分，并放到一个新数组里。