有时候图片列表图片过小看不清图片内容，这时我们一般就希望点击图片可以放大显示进行预览，那么，接下来我们就调用微信原生API的的浏览图片程序进行对图片预览的实现。

单张图片预览

通过微信原生API实现单张图片的浏览

wxml代码

<image src="https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg" bindtap="preview" mode=""/>

添加对应js的点击事件，调用预览图片的API，实现图片的预览

  preview(){wx.previewImage({current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',//当前的图片路径urls: [ // 所有图片的URL列表，数组格式   预览图片路径'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg'],success: function(res) {console.log(res)}})},

图片列表预览

通过读取data中的数据，显示成图片列表的形式，点击图片显示预览图

wxml代码如下：

对应js代码：

data中数据imgList:

imgList:[{id:1,url: 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',title:"图片1"},{id:2,url: 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg',title:"图片2"},{id:3,url: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',title:"图片3"}]

轮播图预览图

使用数据和图片列表数据一样，以下是轮播图的预览图片

wxml界面：

<view class="container"><swiper indicator-dots="{{true}}"     indicator-color="#fff" indicator-active-color="#f00" autoplay="{{true}}" interval="3000" duration="500" circular="{{true}}" vertical="{{false}}"><block wx:for="{{imgList}}" wx:key="*this" ><swiper-item><view class="swiper-item {{item}}"><image src="{{item.url}}" mode="" bindtap="preview" data-idx="{{index}}"/></view></swiper-item></block></swiper>
</view>

对应js内容

 preview(event){// console.log(event);let idx=event.currentTarget.dataset.idx;let imgArr=[];this.data.imgList.forEach(item=> {imgArr.push(item.url);})wx.previewImage({current: this.data.imgList[idx].url,//当前的图片路径urls: imgArr, // 所有图片的URL列表，数组格式   预览图片路径success: function(res) {console.log(res)}})},

效果：

微信小程序-图片预览图相关推荐

微信小程序----图片预览
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载效果图原理使用wx.chooseImage选择本地图片: 使用wx.preview ...
微信小程序图片预览禁止保存
样式自定义的,不用管: mode="widthFix" 表示让图片宽度固定,高度自适应 <view class="w-750"><image ...
微信小程序图片预览保存发送给朋友previewImage
先看看手机上的效果 js实现的代码: wx.previewImage({current: app.globalData.URL + res.data.data.imageUrl, // 当前显示图片的 ...
测试微信小程序图片预览功能（因初步接触之了解到了不能使用本地图片，以下为公司产品图片）...
转载于:https://www.cnblogs.com/lb0602/p/8006146.html
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序九宫格预览+单张图片预览
我们废话不多说直接上效果图下面是代码  <image style="width:550rpx; height: 600rpx;" sr ...
微信小程序图片(单图多图上传显示)
微信小程序上传图片组件自定义最近在做微信小程序开发的时候,遇到了一个问题,就是图片上传于显示问题,微信自带的感觉用起来还是不方便,于是就萌生了自定义图片上传于显示组件废话不多说直接上代码首先创建 ...
微信小程序打开预览下载的文件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用 wx.openDocument(obj) 方法预览 wx.downloadFile({url: 'htt ...
记录一次微信小程序实现预览pdf
微信小程序预览pdf需要注意的是,在安卓端和ios端是有差异的. 安卓端不能用web-view直接打开,需要先下载到本地,再打开文件进行预览. 网上说的ios端可以直接用web-view进行预览,但是 ...

微信小程序-图片预览图

单张图片预览

图片列表预览

轮播图预览图

微信小程序-图片预览图相关推荐

最新文章

热门文章