uniapp轮播图照片点击实现预览效果

<template>
<view class="mt32" v-for="(item,index) in list" :key="index"
>
<view class="flexbox alignitem">
<view class="leftbox " @click="imgdetail(item.list2,index)">
<swiper class="swiper" indicator-dots="true" autoplay interval="2000" duration="500" circular
>
<swiper-item v-for="(item2,index2) in item.list2" :key="index2"
>
<image mode="aspectFit" :src="item2.src" />
</swiper-item>
</swiper>
</view>
<view class="rightbox">
<view>{{item.title}}</view>
<view class="iconfont icon-a-fanhui">
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[
{
title:'保险信息',
list2:[
{src:'../../static/image/Schedule.png'},
{src:'../../static/image/Schedule.png'}
]
},
{
title:'保养信息',
list2:[
{src:'../../static/image/Schedule.png'},
{src:'../../static/image/Schedule.png'}
]
},
{
title:'行车本',
list2:[
{src:'../../static/image/Schedule.png'},
{src:'../../static/image/Schedule.png'}
]
},
]
};
},
methods:{
imgdetail(imglist,index){
let imgsArray = [];
for(let i = 0;i<imglist.length;i++){
//图片不为空
if (imglist[i].src !== "")
{
//将当前的图片push成一个集合
imgsArray.push(imglist[i].src);
}
}
//预览图片
uni.previewImage({
current: index - 1,
urls: imgsArray,
indicator: 'number',
loop: true,
})
}
}
}
</script>
<style lang="scss">
.mtop30{
margin-top: 30upx;
}
.paddbotm24{
padding-bottom: 24upx;
}
.imgbox{
height: 384upx;
background: #E4E4E4;
border-radius: 24upx;
image{
height: 384upx;
width: 100%;
}
}
.leftbox{
width: 160upx;
height: 120upx;
background: #F1F1F1;
border-radius: 16upx;
margin-right: 24upx;
.swiper{
width: 160upx;
height: 120upx;
image {
height: 100%;
width: 100%;
}
}
}
.rightbox{
width: 80%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28upx;
font-weight: bold;
.iconfont{
font-size: 18upx;
}
}
</style>

实现图片预览uni.previewImage内置方法

uni.previewImage({
                   current: index - 1,
                    urls: imgsArray,//预览图片数组
                    indicator: 'number',
                    loop: true,
                })

imgsArray是由图片数组push进来实现预览图片所要的数组的形式{url1，url2}

imgdetail(imglist,index){---这里的imglist就是list.list2,,,,,index就是list的index的索引

实现效果

最后

以上就是开放秀发为你收集整理的uniapp轮播图照片点击实现预览效果的全部内容，希望文章能够帮你解决uniapp轮播图照片点击实现预览效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。