7***@qq.com
7***@qq.com
  • 发布:2018-12-26 16:26
  • 更新:2019-07-19 15:10
  • 阅读:6636

uniapp小程序端多图预览图片问题

分类:uni-app

在预览之前调用了一个获取原图的方法,点击多图预览无论第几张显示的都是第一张图片,不调用获取原图函数就正常....

2018-12-26 16:26 负责人:无 分享
已邀请:
7***@qq.com

7***@qq.com (作者)

没人的吗...

Neil_HL

Neil_HL

event.currentTarget.dataset.src 并不在 SRC 里面,所以都是第一张图片

橘子皮

橘子皮

我刚刚解决了这个问题
你多图预览的时候肯定是遍历图片链接的列表以展示在视图层中,这样的话你可以给每一个图片动态绑定id属性,这样在调用uni.previewImage()方法时候id会返回在e.currentTarget.id,再把这个值赋给current就OK了
视图层

复制代码<view class="imgbox" v-for="(item,index) in imgList" :key='item.key' >  
                    <image :src="item"  @tap="preview" :id="index"></image>  
                </view>

方法

复制代码preview(res){  
                let myindex = res.currentTarget.id;  
                uni.previewImage({  
                    urls:this.imgList,  
                    current:myindex  
                })  
            }
  • h***@163.com

    虽然可以获取到下标,但是还是不行,有哪里不对么?

    2019-12-25 09:20

  • h***@163.com

    回复 h***@163.com: 找到问题了,在image标签中,传入下标时要以这种形式 :id="imgList[index]"

    2019-12-25 09:30

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容