微信小程序图片预览提供了一个wx.previewImage接口,如下图:

现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示:

那么我们需要解决2个问题:

1.从这些列表中提取出只是图片类型的列表,并将它的url存入数组中;

2.获取当前你点击图片的索引值。

解决思路:

解决问题1:

假设从后台获取到的文件的列表保存到数组diskList中,我们可以通过filter提取出类型为image的列表,保存到数组imgList中。

然后再通过forEach刚刚筛选出来的imgList提取出它的url,保存到数组imgUrlList中。

解决问题2:

通过indexOf方法,在imgUrlList通过判断当前图片的路径返回索引值。

核心代码截图:

大致思路和解决方法已讲述完毕,如有疑问,欢迎留言~如果您有更好的解决方案,希望不吝赐教~~

微信小程序——网盘图片预览的更多相关文章

  1. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

  2. 微信小程序点击图片预览-wx.previewImage

    <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...

  3. 微信小程序-点击图片预览

    拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数

  4. 微信小程序:点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  5. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  6. 微信小程序:点击预览大图功能

    点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...

  7. 小程序 canvas实现图片预览,图片保存

    wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...

  8. 解决微信小程序wepy真机预览跟本地表现不一样,数据变化了视图没变化

    当时搜了很多相关问题都没找到相似的 只看到有这个相似的描述wepy在onLoad里修改data-object的值页面不渲染 ,通过setData解决的. 但是这个还不是根本的解决办法,有些地方用set ...

  9. 【微信小程序】下载并预览文档——pdf、word、excel等多种类型

    .wxml文件 <view data-url="https://XXX/upload/zang." data-type="excel" catchtap= ...

随机推荐

  1. jumpserver 3.2修改排序规则

    在默认的情况下,我们使用jumpserver的时候 这里我使用xshell 客户端连接到堡垒机的时候, 这里我的显示规则是根据IP排序的,但是我这里的服务器的hostname 都是根据场景设置的hos ...

  2. centos安装Elasticsearch步骤

    1.安装JDK:centos删除openJDK,安装JDK,vim /etc/profile配置JAVA_HOME 2.官网下载elasticsearch:https://www.elastic.co ...

  3. postgres json

    https://www.postgresql.org/docs/9.6/static/functions-json.html Search Documentation:  Home → Documen ...

  4. Hive怎样加入第三方JAR

    以增加elsaticsearch-hadoop-2.1.2.jar为例,讲述在Hive中增加第三方jar的几种方式. 1,在hive shell中增加 [hadoop@hadoopcluster78 ...

  5. Java中List详解

    List是Java中比较常用的集合类,关于List接口有很多实现类,本文就来简单介绍下其中几个重点的实现ArrayList.LinkedList和Vector之间的关系和区别. List List 是 ...

  6. ubuntu 查看软件安装目录以及安装版本

    1.aptitude show 软件名 例如:aptitude show kde-runtime ****@ubuntu:~$ aptitude show kde-runtime 软件包: kde-r ...

  7. vim学习日志(7):替换、删除文件中的字符

    vim全局替换文件: 语法为 :[addr]s/源字符串/目的字符串/[option] 全局替换命令为::%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行. 如:“1,20 ...

  8. 【Spring】Spring,我的零散使用杂记

    通过Java类设置配置信息,JavaConfig Spring常用的通过XML或者@Controller.@Servoce.@Repository.@Component等注解注册Bean,最近看Spr ...

  9. 【Java】异常类处理层次

    异常处理简介 异常在java的开发中可能没有那么被重视.一般遇到异常,直接上抛,或者随便catch一下处理之后对于程序整体运行也没有什么大的影响.不过在企业级设计开发中,异常的设计与处理的好坏,往往就 ...

  10. svn 版本管理与自动部分发布

    作为团队开发项目时,会遇到项目的版本管理,测试部署与发布部署,下面是摘至他人的关于版本管理和自动部署的方案. svn自动部署的实现: 使用svn的hook功能 1.在版本库的hooks目录下面,有一些 ...