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

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

那么我们需要解决2个问题:
1.从这些列表中提取出只是图片类型的列表,并将它的url存入数组中;
2.获取当前你点击图片的索引值。
解决思路:
解决问题1:
假设从后台获取到的文件的列表保存到数组diskList中,我们可以通过filter提取出类型为image的列表,保存到数组imgList中。
然后再通过forEach刚刚筛选出来的imgList提取出它的url,保存到数组imgUrlList中。
解决问题2:
通过indexOf方法,在imgUrlList通过判断当前图片的路径返回索引值。
核心代码截图:



大致思路和解决方法已讲述完毕,如有疑问,欢迎留言~如果您有更好的解决方案,希望不吝赐教~~
微信小程序——网盘图片预览的更多相关文章
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- 微信小程序点击图片预览-wx.previewImage
<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...
- 微信小程序-点击图片预览
拿接口 有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数
- 微信小程序:点击预览图片
在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 微信小程序:点击预览大图功能
点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...
- 小程序 canvas实现图片预览,图片保存
wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...
- 解决微信小程序wepy真机预览跟本地表现不一样,数据变化了视图没变化
当时搜了很多相关问题都没找到相似的 只看到有这个相似的描述wepy在onLoad里修改data-object的值页面不渲染 ,通过setData解决的. 但是这个还不是根本的解决办法,有些地方用set ...
- 【微信小程序】下载并预览文档——pdf、word、excel等多种类型
.wxml文件 <view data-url="https://XXX/upload/zang." data-type="excel" catchtap= ...
随机推荐
- 菜鸟学SSH(十)——Hibernate核心接口
在使用Hibernate的时候,我们通常都会用的Configuration.SessionFactory.Session.Transaction.Query和Criteria等接口.通过这些接口可以, ...
- flink Job提交过程
https://www.jianshu.com/p/0cdfa2a05ebd http://vinoyang.com/2017/04/02/flink-runtime-client-submit-jo ...
- AI 技术咖们说,进入未来世界首先需要一个“虚拟的我” | 科技生活节倒计时8天
http://www.tmtpost.com/3367762.html 未来世界是什么样子? 斯皮尔伯格在<头号玩家>中构建了一个充满科技感.富有浓烈浪漫主义色彩的虚拟世界.戴上VR眼镜, ...
- android category
本章节翻译自<Beginning-Android-4-Application-Development>,如有翻译不当的地方,敬请指出. 原书购买地址http://www.amazon.co ...
- Spring和Mybatis整合过程中遇到的一个找不到sqlSessionFactory或sqlSessionTemplate的异常
先看启动web项目时IDEA控制台抛出的异常(红色部分): D:\tomcat-kafka-\bin\catalina.bat run [-- ::,] Artifact Gradle : com.x ...
- 虚拟机三种网络模式详解(Bridge,Nat,Host-only)
虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host-Only 初学者看到虚拟机有三种网络 ...
- Apache重写RewriteCond
RewriteCond就像我们程序中的if语句一样,表示如果符合某个或某几个条件则执行RewriteCond下面紧邻的RewriteRule语句,这就是RewriteCond最原始.基础的功能,为了方 ...
- 带网上开户表单jQuery焦点图
带网上开户表单jQuery焦点图是一款适合证券公司的带表单的图片左右滚动切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="ind ...
- 如何在CentOS或者RHEL上启用Nux Dextop仓库 安装shutter截图工具
Nux Dextop是一个面对CentOS.RHEL.ScientificLinux的含有许多流行的桌面和多媒体相关的包的第三方RPM仓库(比如:Ardour,Shutter等等).目前,Nux De ...
- jQuery.fly插件实现添加购物车抛物线效果
样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...