uniapp点击图片放大预览

简介: uniapp点击图片放大预览

阐述


  • 有些时候我们在用uniapp显示图片时,有的不宜全部显示到屏幕上,uniapp提供了一个非常好用的api。


实现方式如下:

<template>
  <view class="content">
    <image class="logo" src="/static/images/a.png" @click="clickImg"></image>
  </view>
</template>
 
<script>
  export default {
    methods: {
      clickImg() {
        uni.previewImage({
          urls: ["/static/images/a.png"], //需要预览的图片http链接列表,多张的时候,url直接写在后面就行了
          current: '', // 当前显示图片的http链接,默认是第一个
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })
      },
    }
  }
</script>


效果

目录
相关文章
|
7月前
|
移动开发 JavaScript 小程序
uniapp中间加号点击弹窗怎么实现?完整教程
uniapp中间加号点击弹窗怎么实现?完整教程
541 1
uniapp中间加号点击弹窗怎么实现?完整教程
|
7月前
uniapp点击图片预览功能?
uniapp点击图片预览功能?
|
5月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
104 1
|
7月前
uniapp点击tabbar之前做判断
uniapp点击tabbar之前做判断
399 1
|
7月前
|
前端开发 JavaScript
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
403 0
|
API
uniapp点击图片放大预览
uniapp点击图片放大预览
157 0
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
444 0
uniapp 文本复制及文件预览
uniapp 文本复制及文件预览
170 0
|
存储 JavaScript
uniapp数据点击的时候将数据存入同一个本地存储中并且最大限度5个
uniapp数据点击的时候将数据存入同一个本地存储中并且最大限度5个
174 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
131 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)