微信小程序点击单个图片进行预览图片,点击预览pdf文件 2022-12-10 08:55 499阅读 0赞 这里介绍的是单个图片点击预览的,也可以多张,方法差不多 **index.wxml** <view class="page"> <view class="page__hd"> <text class="page__title">image</text> <text class="page__desc">图片</text> </view> <view class='imgList'> <view class='imgList-li'> <image src="{ {ItemUrl}}{ {imgurl}}" mode="scaleToFill" bindtap='previewImg'></image> </view> </view> </view> **index.wxss** .imgList{ width: 100%; } .imgList .imgList-li{ width: 300rpx; height: 300rpx; } .imgList .imgList-li image{ width: 300rpx; height: 300rpx; } **index.js** Page({ data: { imgurl :'/dmsmty/74_74_100/t01df7265f2a34fadb9.png', ItemUrl: 'https://p.ssl.qhimg.com' }, previewImg:function(e){ var imgArrUrl = this.data.ItemUrl + this.data.imgurl; wx.previewImage({ current: imgArrUrl, //当前图片地址 urls: imgArrUrl.split(","), //所有要预览的图片的地址集合 数组形式['https://p.ssl.qhimg.com/dmsmty/74_74_100/t01df7265f2a34fadb9.png'] success: function(res) { }, fail: function(res) { }, complete: function(res) { }, }) } }) 如果是点击预览pdf文件(真机华为手机可能有问题) wx.downloadFile({ url: 'https://storage.jd.com/eicore-fm.jd.com/042001900211-71246106.pdf?Expires=2538379555&A', //要预览的PDF的地址 success: function (res) { console.log(res); if (res.statusCode === 200) { //成功 var Path = res.tempFilePath //返回的文件临时地址,用于后面打开本地预览所用 wx.openDocument({ filePath: Path, //要打开的文件路径 success: function (res) { console.log('打开PDF成功'); } }) } }, fail: function (res) { console.log(res); //失败 } })
相关 纯js实现点击预览图片效果 效果如图所示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0 灰太狼/ 2023年06月20日 10:53/ 0 赞/ 338 阅读
相关 微信小程序点击单个图片进行预览图片,点击预览pdf文件 这里介绍的是单个图片点击预览的,也可以多张,方法差不多 index.wxml <view class="page"> <view class="pag 待我称王封你为后i/ 2022年12月10日 08:55/ 0 赞/ 500 阅读
相关 uni-app点击预览图片 <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi 朴灿烈づ我的快乐病毒、/ 2022年12月02日 00:43/ 0 赞/ 476 阅读
相关 vue图片点击放大预览v-viewer 图片放大预览功能 ![在这里插入图片描述][20210317164841650.png_pic_center] 1、安装依赖 npm install v- 亦凉/ 2022年10月22日 13:56/ 0 赞/ 317 阅读
相关 点击按钮预览图片,可以预览多组图片(vue+element) elementUI 提供的 Image 组件直接可以点击图片查看图片预览,我的需求也是查看预览图片,但是有很多小的区别! > 1、点击按钮预览图片; > 2、可以预览多个 た 入场券/ 2022年08月30日 15:59/ 0 赞/ 738 阅读
相关 微信图片点击预览 $(function(){ var imgsurl=[]; var nowurl=''; var imgObj=$(".swi 快来打我*/ 2022年06月08日 09:50/ 0 赞/ 546 阅读
相关 点击图片上传实时预览 html源代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset 快来打我*/ 2022年05月08日 12:16/ 0 赞/ 457 阅读
相关 微信小程序:点击图片预览 做微信小程序的时候使用的图片大小不尽相同,为了让使用者能够浏览原图,就需要给图片添加点击预览的功能,下面我详细介绍一下实现步骤, 首先介绍微信小程序文档中的使用教程: ![ 妖狐艹你老母/ 2022年04月03日 03:14/ 0 赞/ 418 阅读
相关 uni-app点击预览图片 <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFi 忘是亡心i/ 2021年07月24日 21:31/ 1 赞/ 1149 阅读
相关 uniapp 上传图片、点击预览图片 1、在回调中打开本地相册 uni.chooseImage({ count:上传照片数量, //浏览器无法限制,默认上传数量为9 比眉伴天荒/ 2021年07月24日 11:07/ 0 赞/ 1462 阅读
还没有评论,来说两句吧...