list: [
'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg',
'http://img.52z.com/upload/news/image/20180312/20180312060838_67790.jpg',
], // 如果用了wepy的话
<swiper-item v-for="item in list">
<image :src="item" class="slide-image" data-list="{{list}}" data-src="{{item}}" style="width:100%; height:276rpx;" @tap="previewImage"/>
</swiper-item> // 原始小程序 data-list : 所有预览图片; data-src: 当前预览图片
<swiper-item wx:for="{{list}}" wx:for-item="item">
<image :src="item" class="slide-image" data-list="{{list}}" data-src="{{item}}" style="width:100%; height:276rpx;" @tap="previewImage"/>
</swiper-item> methods: {
previewImage: function (e) {
var src = e.currentTarget.dataset.src; // 获取data-src
var imgList = e.currentTarget.dataset.list; // 获取data-list
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList, // 需要预览的图片http链接列表
success: function(res) {
console.log('success');
},
fail: function(res) {
console.log('fail');
},
})
}
},
wx.previewImage 不支持本地图片预览,只支持http或https链接图片

小程序图片预览 wx.previewImage的更多相关文章

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

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

  2. 微信小程序-图片预览

    仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...

  3. TODO:小程序手机预览调试

    TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...

  4. Wx-小程序-图片预览、保存

    点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...

  5. 微信小程序手机预览请求不到数据(最后一条不明所以)

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  6. 微信小程序H5预览页面框架(二维码不隐藏)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 微信小程序H5预览页面框架

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 微信小程序,预览在开发工具上显示正常,手机预览二维码报request->fail错误,打开手机的调试功能又正常。

    这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...

  9. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

随机推荐

  1. fiddler-重定向AutoResponder(三)

    关于Fiddler的AutoResponder重定向功能,主要是时进行会话的拦截,然后替换原始资源的功能. 它与手动修该reponse是一样的,只是更加方便了,可以创建相应的rules,适合批处理的重 ...

  2. user-select 用户禁止选中

    我们在页面输入的文本按理来说应该都是可以选中的,但是如何才能让显示出来的文本或是图片不被选中呢,这时候就需要用到 user-select 属性. user-select user-select (CS ...

  3. CSS currentColor 变量

    ㈠currentColor定义及理解 来自MDN的解释:currentColor代表了当前元素被应用上的color颜色值. 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上. 你这 ...

  4. MySQL的字符集操作命令总结

    这篇文章主要介绍了MySQL的字符集操作命令总结,包括各种查看数据库.数据表等查询命令,需要的朋友可以参考下   以下均在mysql 5.5命令行中运行通过: 查看MySQL支持的字符集: 代码如下: ...

  5. 51 Nod N的阶乘的长度 (斯特林近似)

    1058 N的阶乘的长度  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Inp ...

  6. 【POJ1011】Sticks

    [题目概括] 现在有\(n\)个长度不超过\(50\)的木棍,请你把这些小木棍拼成若干根长度相同的木棍. 请你最小化拼成后的长度. [思路要点] 考虑枚举最后的长度,然后判断是否可以,这样就不需要最优 ...

  7. unittest详解(四) 批量执行用例(discover)

    前面我们说了,对于不同文件用例,我们可以通过addTest()把用例加载到一个测试套件(TestSuite)来统一执行,对于少量的文件这样做没问题,但是如果有几十上百个用例文件,这样做就太浪费时间了. ...

  8. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  9. Nginx配置记录【例2】

    B服务器,例: [root@localhost conf.d]# egrep -v "^#|^$" /etc/nginx/nginx.conf user nginx; worker ...

  10. php的intval函数

    PHP intval() 函数 PHP 可用的函数PHP 可用的函数 intval() 函数用于获取变量的整数值. intval() 函数通过使用指定的进制 . PHP , PHP , PHP 语法 ...