imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识
二.例子
1.wxml
2.wxss
.container {
box-sizing:border-box;
padding:20px;
}
.previewimg{
float:left;
width:45%;
height:200px;
margin:2%;
}
.previewimg image{
width:100%;
height:100%;
}
3.js
使用网络的图
var app = getApp()
Page({
data: {
imgalist:[ 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496287851&di=0a26048f586b8521
93cb5026d60c4fad&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F74%2F05%2F99C58PICYck.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=0d0acdebf0f532edd0fcdb7
6265623c5&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv3%2F2%2Fd%2F61.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185413&di=55835ae37fdc95a317b03f28162c0
de1&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201307%2F12%2F20130712224237_nSjht.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495693185410&di=e28cc03d2ae84130eabc2
6bf0fc7495f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150814%2F0005018308986502_b.jpg'
]},
/**
* 预览图片
*/
previewImage: function (e) {
var current=e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imgalist // 需要预览的图片http链接列表
})
}
})
使用本地的图片:
var app = getApp()
Page({
data: {
imgalist:[ '../uploads/a01.jpg',
'../uploads/a02.jpg',
'../uploads/a03.jpg',
'../uploads/foods.jpg'
]},
/**
* 预览图片
*/
previewImage: function (e) {
var current=e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imgalist // 需要预览的图片http链接列表
})
}
})
所以这个接口, 按照官方示例, 可能只支持 http 或者 https 协议的网络图片地址.
注意:
网上还有说本地图片确实是不可以的,后面通过选取手机相册内的照片,可以预览,前提是在真机上演示。
下面介绍下微信小程序:点击预览图片
在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片。
1.xml
2.js
data: {
imglist:['图片链接','图片链接','图片链接']
},
/**
* 预览图片
*/
previewImage: function (e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imglist // 需要预览的图片http链接列表
})
} ,
总结
以上所述是小编给大家介绍的微信小程序wx.previewImage预览图片实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解相关推荐
- 微信小程序wx.previewImage预览图片
小功能 点击图片放大预览 这个也是小程序开发中经常遇到的小功能,所以也单独拿出来做一下总结,其实就是一个小知识点. 文档链接 :https://developers.weixin.qq.com/min ...
- 关于微信小程序wx.previewImage预览图片黑屏
问题描述:后端返回的http图片路径复制到浏览器里可以进行预览,但是使用wx.previewImage方法在小程序中预览就会黑屏加载转圈 然后就发现后端给我的路径是这样子的:http://192.16 ...
- 微信小程序 wx.previewImage 预览分享图片结束之后 执行事件
预览结束之后 会执行一遍 onshow 所以可以把执行事件写在onshow里面 /*** 生命周期函数--监听页面显示*/onShow: function () {this.setData({pers ...
- 下拉多选框 微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- 微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- 微信开发工具button跳转页面_微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkP ...
- 高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解
前言 最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图 百度坐标 (BD-09) 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标 ...
- 微信小程序实现弹窗预览图片
今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章 微信小程序之第三方UI框架 za ...
- 使用微信小程序开发弹出框应用实例详解
1 2 3 4 5 view class="container" class="zn-uploadimg"> <button type=" ...
最新文章
- 工作经验到底是个什么东东?工作经验从哪里来?
- 设计模式六大原则之白话讲解
- 经常在比特币中看到的merkle树是什么?
- vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
- hivesql修改字段类型_Hive SQL语法总结
- Spring Security构建Rest服务-0600-SpringSecurity基本原理
- [2017.01.04] 经典排序算法思想及其实现
- CMMI认证的周期是多久?费用是多少?
- NXP RT1062 flashloader下载程序到RAM执行
- 【AP_EJOR】Robust solutions to multi-objective linear programs with uncertain data(2)
- android 音乐扬声器,android安插耳机状态使用扬声器外放音乐
- java实现将word转换pdf
- .backdoor.php,Metasploit - crack chinese caidao php backdoor
- 天天向上的力量python代码解释_小白学Python-12(天天向上的力量)
- java.lang.NoClassDefFoundError: Could not initialize class sun.awt.X11.XToolkit异常解决
- 网页游戏mysql修改_大天使之剑奇迹网页游戏 一键服务端+架设教程+修改方法
- k8s cheat sheet
- recover database
- 图灵机器人微信自动聊天功能
- php随机缩略图,实现随机缩略图的简单思路和phpcms随机缩略图两种方法
热门文章
- linux系统自带python_Linux删除系统自带版本Python过程详解
- python典型安装_python包的多种安装方式(内网)
- 计算机视觉领域,计算机视觉
- python 地理信息_GitHub - sujeek/geospatial-data-analysis-cn: Python地理信息数据教程中文版(GeoPandas、GIS)...
- python快速排序最简单写法_漫画:最最最最最简单的选择排序
- vim关闭所有折叠命令
- 过采样中用到的SMOTE算法
- 暖通lisp快捷键_CAD 快捷键一览
- python numpy官网_Python Numpy 教程(上)
- 条形图坐标轴_手把手教你用Excel绘图 | 双轴簇状条形图