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>

效果

uniapp点击图片放大预览,uni-app文章来源地址https://www.toymoban.com/news/detail-630682.html

到了这里,关于uniapp点击图片放大预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp图片放大缩小预览,并支持图片拖动附效果图

    效果图: 放大缩小和拖动是根据 movable-area 组件来实现的,小程序和uniapp都支持这个组件。 movable-area | 微信开放文档 微信开发者平台文档 https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html 实现思路: 默认显示默认大小的图片,点击图片执行yulan事件从而显示放大缩

    2024年02月11日
    浏览(37)
  • uni-app点击复制指定内容(点击复制)

    uni.setClipboardData(OBJECT)

    2024年02月09日
    浏览(33)
  • 解决uni-app uniCloud小程序预览没有数据

    例如:最近小程序的项目是用uni-app写的,项目用uniCloud作为后端,原本以为unicloud跟微信小程序云开发差不多,但是预览到手机的时候没有数据了…… unicloud作为后端,手机预览没有数据,通过查阅文献和网搜,进行了一系列的排查。 跟以往的微信云开发不同,unicloud作为后

    2024年02月09日
    浏览(41)
  • [uni-app] 防重复点击处理 - 自定义指令

    一般用节流防抖的方式处理, 这里通过vue的自定义指令方式也可以 实现: main.js中使用一下 应用:

    2024年02月05日
    浏览(54)
  • uni-app之微信小程序实现‘下载+保存至本地+预览’功能

    目录 一、H5如何实现下载功能 二、微信小程序实现下载资源功能方面与H5有很大的不同 三、 微信小程序实现文件(doc,pdf等格式,非图片)下载(下载-保存-预览)功能 四、图片预览、保存、转发、收藏:uni.previewImage() 五、 我当前遇到‘关于文件预览uni.openDocument()’API的问

    2024年02月15日
    浏览(52)
  • uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】

    先上效果图: 1. 在封装方法的文件夹下新建一个js文件,然后把这些功能进行封装 2.在需要的页面中进行调用 注意点: 1. 拨打电话需要进行app权限配置,设置完成后可以在正式版看到效果。(这几个最好都勾选上) 2. 配置高德地图的app模块设置,这里的appkey需要到高德地图

    2024年02月05日
    浏览(54)
  • #Uniapp: uni.previewImage(OBJECT) 预览图片

    uni.previewImage(OBJECT) 预览图片。 api地址 媒体-图片 示例 OBJECT 参数说明 参数名 类型 必填 说明 平台差异说明 count Number 否 最多可以选择的图片张数,默认9 见下方说明 sizeType Array 否 original 原图,compressed 压缩图,默认二者都有 App、微信小程序、支付宝小程序、百度小程序 e

    2024年01月25日
    浏览(34)
  • uni-app中uni-table的uni-tr无点击事件

    本文记录用于记录使用 uni-app 开发过程遇到的bug。 在使用 uni-table 时,想给 uni-table 的行添加行点击事件;但发现官方并未给 uni-tr 增加点击行点击事件(很多事件都没有),这个问题很久就有人在其官方论坛提出,但官方一直没有解决。在csdn中找了一个类似的帖子,但本人

    2024年02月15日
    浏览(34)
  • uni-app开发小程序,radio单选按钮,点击可以选中,再次点击可以取消

    不适用官方的change方法,自己定义点击方法。 动态判断定义的值是否等于遍历的值进行回显,如果和上一次点击的值一样,就把定义的值改为null

    2024年02月11日
    浏览(44)
  • uni-app 之 图片

    uni-app 之 图片 获取图片 v-bind 动态绑定 image.png

    2024年02月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包