Uniapp通过class封装预览图片

不说废话,直接上代码

创建一个js文件

let {log} = console

class Logic{
	constructor(index,imgarr) {
	    this.index = index
		this.imgarr = imgarr
	}
	
	// 预览图片
	previewImg(){
		uni.previewImage({
			current:this.index,
			urls: this.imgarr,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏']
			}
		})
		.then((res)=>{
			log(res)
		})
		.catch((err)=>{
			log(err)
		})
	}
}

module.exports = {Logic}

在页面使用

import { Logic } from ''

// 预览图片
previmg(index, imgArray) {
				new Logic(index, imgArray).previewImg()
},

index是图片的下标

imgArray是包裹图片的数组

或者你可以直接挂载到原型上也可以

在这里插入图片描述

github上有详细的教程

github项目地址:https://github.com/lsh555/TmUniapp

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45389051/article/details/111085417