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);
                        }
                    }
                });
            },