脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序图片预览

微信小程序实现图片预览功能

 更新时间：2018年01月31日 16:47:56   作者：Rattenking  
这篇文章主要为大家详细介绍了微信小程序实现图片预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序实现图片预览的具体代码，供大家参考，具体内容如下

效果图

图片预览效果图

原理

  • 使用wx.chooseImage选择本地图片；
  • 使用wx.previewImage预览图片。

WXML

<view>
 <button bindtap="previewImage" type="primary">图片上传预览</button>
 <view class="tui-content"> 
 <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" data-src="{{item}}" src="{{item}}"></image>
 </view>
</view>

WXSS

page{background-color: #efeff4;}
.tui-preview-img{
 width: 200rpx;
 height: 120rpx;
}

JS

Page({
 data: {
 previewImageArr:[]
 },
 previewImage(e){
 var self = this;
 wx.chooseImage({
  count:8,
  success(res) {
  var tempFilePaths = res.tempFilePaths;
  self.setData({ previewImageArr: tempFilePaths});
  }
 })
 },
 changePreview(e){
 var self = this;
 wx.previewImage({
  current: e.currentTarget.dataset.src,
  urls: self.data.previewImageArr
 })
 }
})

注意

wx.previewImage的参数current和urls必须是http链接。

DEMO下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 早该知道的7个JavaScript技巧

    早该知道的7个JavaScript技巧

    早该知道的7个JavaScript技巧，有了这7个JavaScript技巧，事半功倍，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JS实现在页面随时自定义背景颜色的方法

    JS实现在页面随时自定义背景颜色的方法

    这篇文章主要介绍了JS实现在页面随时自定义背景颜色的方法,实例分析了javascript操作css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js实现table添加行tr、删除行tr、清空行tr的简单实例

    js实现table添加行tr、删除行tr、清空行tr的简单实例

    下面小编就为大家带来一篇js实现table添加行tr、删除行tr、清空行tr的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 关于ES6的六个小特性（二）

    关于ES6的六个小特性（二）

    ES6提供了大量新的好的东西，在过去的一年内，浏览器提供商做了大量的辛勤工作将新的语言特性更新到他们的浏览器中。尽管有重大的更新，很多小的语言更新另我眼前一亮，下面这篇文章主要介绍了关于ES6的六个小特性,需要的朋友可以参考下。
    2017-02-02
  • js is_valid_filename验证文件名的函数

    js is_valid_filename验证文件名的函数

    有时候我们需要对文件名进行控制，包括一些特殊命名的文件与特殊符号的文件名进程替换，那么就可以使用下面的函数
    2017-07-07
  • JavaScript手写一个前端存储工具库

    JavaScript手写一个前端存储工具库

    在项目开发的过程中，为了减少提高性能，减少请求，开发者往往需要将一些不易改变的数据放入本地缓存中。本文就来用JavaScript手写一个前端存储工具库，希望对大家有所帮助
    2023-02-02
  • 使用apifm-wxapi模块中的问题及解决方法

    使用apifm-wxapi模块中的问题及解决方法

    这篇文章主要介绍了使用apifm-wxapi模块中的问题及讲解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS中的Replace()传入函数时的用法详解

    JS中的Replace()传入函数时的用法详解

    这篇文章主要介绍了JS中的Replace()传入函数时的用法详解,replace方法的语法是：stringObj.replace(rgExp, replaceText)关于js replace 传入函数的用法，大家通过本文学习吧
    2017-09-09
  • JavaScript中的location、history、navigator对象实例介绍

    JavaScript中的location、history、navigator对象实例介绍

    这篇文章主要介绍了JavaScript中的location、history、navigator对象实例介绍,需要的朋友可以参考下
    2023-05-05
  • js浮点数保留两位小数点示例代码(四舍五入)

    js浮点数保留两位小数点示例代码(四舍五入)

    本篇文章主要介绍了js浮点数保留两位小数点示例代码(四舍五入) 需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12

最新评论