我是靠谱客的博主 开放秀发,这篇文章主要介绍uniapp轮播图照片点击实现预览效果,现在分享给大家,希望可以做个参考。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<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轮播图照片点击实现预览效果内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(58)

评论列表共有 0 条评论

立即
投稿
返回
顶部