uni-app图片列表预览大图

首先确定预览是新写一个页面还是搞一个弹窗,随你,我是新开一个页面的,然后在点击图片准备预览的时候,需要的参数有:
1,当前点击图片的下标,
2,当前点击图片的列表数组
点击的时候将这些参数存起来:

父组件:
// 点击预览

previewImg(item, index) {
    uni.setStorageSync("currentImgIndex",index)    // 当前下标
    uni.setStorageSync('imgPreviewPicList', item)  // 当前数组
    uni.navigateTo({
        url: '../imgPreview/imgPreview'             // 要跳转的预览页
    })
},

预览页:
imgPreview.vue:这个代码也很简单,一看即懂,就是用个swiper组件






实际效果如下图所示:

你可能感兴趣的:(uni-app)