uniapp中app端页面中有多个图片需要预览，且需要左右滑动(即时通讯中的聊天)

1.点击图片时，先获取所有的消息，将带有图片的消息保存为一个图片数组。

// arr是新图片数组    this.msglist是所有消息的数组
let arr = []
this.msglist.forEach((item,index) => {
    // 有img是图片消息
    if(item.img){
        arr.push(item.img)
    }
})

2.获取当前图片在 预览图片数组 中的索引(e点击图片的数据)

let index = arr.findIndex(value => value == e.img)

3.调用uniapp预览图片的api

uni.previewImage({
    current: index,
    urls: arr,
    longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: function(data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' +                 
            (data.index + 1) + '张图片');
        },
        fail: function(err) {
            console.log(err.errMsg);
        }
    }
});

 

完整代码：

// 预览图片
            previewImgClick(e){
                console.log(e);
                // 预览图片的数组
                let arr = []
                this.msglist.forEach((item,index) => {
                    if(item.img){
                        arr.push(item.img)
                    }
                })
                // 当前图片在 预览图片数组中的索引
                let index = arr.findIndex(value => value == e.img)
                console.log(index);
                console.log(arr);
                uni.previewImage({
                    current: index,
                    urls: arr,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏'],
                        success: function(data) {
                            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                        },
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                    }
                });
            },