14 changed files with 1029 additions and 77 deletions
@ -0,0 +1,196 @@ |
|||||
|
function getLocalFilePath(path) { |
||||
|
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) { |
||||
|
return path |
||||
|
} |
||||
|
if (path.indexOf('file://') === 0) { |
||||
|
return path |
||||
|
} |
||||
|
if (path.indexOf('/storage/emulated/0/') === 0) { |
||||
|
return path |
||||
|
} |
||||
|
if (path.indexOf('/') === 0) { |
||||
|
var localFilePath = plus.io.convertAbsoluteFileSystem(path) |
||||
|
if (localFilePath !== path) { |
||||
|
return localFilePath |
||||
|
} else { |
||||
|
path = path.substr(1) |
||||
|
} |
||||
|
} |
||||
|
return '_www/' + path |
||||
|
} |
||||
|
|
||||
|
function dataUrlToBase64(str) { |
||||
|
var array = str.split(',') |
||||
|
return array[array.length - 1] |
||||
|
} |
||||
|
|
||||
|
var index = 0 |
||||
|
function getNewFileId() { |
||||
|
return Date.now() + String(index++) |
||||
|
} |
||||
|
|
||||
|
function biggerThan(v1, v2) { |
||||
|
var v1Array = v1.split('.') |
||||
|
var v2Array = v2.split('.') |
||||
|
var update = false |
||||
|
for (var index = 0; index < v2Array.length; index++) { |
||||
|
var diff = v1Array[index] - v2Array[index] |
||||
|
if (diff !== 0) { |
||||
|
update = diff > 0 |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
return update |
||||
|
} |
||||
|
|
||||
|
export function pathToBase64(path) { |
||||
|
return new Promise(function(resolve, reject) { |
||||
|
if (typeof window === 'object' && 'document' in window) { |
||||
|
if (typeof FileReader === 'function') { |
||||
|
var xhr = new XMLHttpRequest() |
||||
|
xhr.open('GET', path, true) |
||||
|
xhr.responseType = 'blob' |
||||
|
xhr.onload = function() { |
||||
|
if (this.status === 200) { |
||||
|
let fileReader = new FileReader() |
||||
|
fileReader.onload = function(e) { |
||||
|
resolve(e.target.result) |
||||
|
} |
||||
|
fileReader.onerror = reject |
||||
|
fileReader.readAsDataURL(this.response) |
||||
|
} |
||||
|
} |
||||
|
xhr.onerror = reject |
||||
|
xhr.send() |
||||
|
return |
||||
|
} |
||||
|
var canvas = document.createElement('canvas') |
||||
|
var c2x = canvas.getContext('2d') |
||||
|
var img = new Image |
||||
|
img.onload = function() { |
||||
|
canvas.width = img.width |
||||
|
canvas.height = img.height |
||||
|
c2x.drawImage(img, 0, 0) |
||||
|
resolve(canvas.toDataURL()) |
||||
|
canvas.height = canvas.width = 0 |
||||
|
} |
||||
|
img.onerror = reject |
||||
|
img.src = path |
||||
|
return |
||||
|
} |
||||
|
if (typeof plus === 'object') { |
||||
|
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) { |
||||
|
entry.file(function(file) { |
||||
|
var fileReader = new plus.io.FileReader() |
||||
|
fileReader.onload = function(data) { |
||||
|
resolve(data.target.result) |
||||
|
} |
||||
|
fileReader.onerror = function(error) { |
||||
|
reject(error) |
||||
|
} |
||||
|
fileReader.readAsDataURL(file) |
||||
|
}, function(error) { |
||||
|
reject(error) |
||||
|
}) |
||||
|
}, function(error) { |
||||
|
reject(error) |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) { |
||||
|
wx.getFileSystemManager().readFile({ |
||||
|
filePath: path, |
||||
|
encoding: 'base64', |
||||
|
success: function(res) { |
||||
|
resolve('data:image/png;base64,' + res.data) |
||||
|
}, |
||||
|
fail: function(error) { |
||||
|
reject(error) |
||||
|
} |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
reject(new Error('not support')) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function base64ToPath(base64) { |
||||
|
return new Promise(function(resolve, reject) { |
||||
|
if (typeof window === 'object' && 'document' in window) { |
||||
|
base64 = base64.split(',') |
||||
|
var type = base64[0].match(/:(.*?);/)[1] |
||||
|
var str = atob(base64[1]) |
||||
|
var n = str.length |
||||
|
var array = new Uint8Array(n) |
||||
|
while (n--) { |
||||
|
array[n] = str.charCodeAt(n) |
||||
|
} |
||||
|
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type }))) |
||||
|
} |
||||
|
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/) |
||||
|
if (extName) { |
||||
|
extName = extName[1] |
||||
|
} else { |
||||
|
reject(new Error('base64 error')) |
||||
|
} |
||||
|
var fileName = getNewFileId() + '.' + extName |
||||
|
if (typeof plus === 'object') { |
||||
|
var basePath = '_doc' |
||||
|
var dirPath = 'uniapp_temp' |
||||
|
var filePath = basePath + '/' + dirPath + '/' + fileName |
||||
|
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) { |
||||
|
plus.io.resolveLocalFileSystemURL(basePath, function(entry) { |
||||
|
entry.getDirectory(dirPath, { |
||||
|
create: true, |
||||
|
exclusive: false, |
||||
|
}, function(entry) { |
||||
|
entry.getFile(fileName, { |
||||
|
create: true, |
||||
|
exclusive: false, |
||||
|
}, function(entry) { |
||||
|
entry.createWriter(function(writer) { |
||||
|
writer.onwrite = function() { |
||||
|
resolve(filePath) |
||||
|
} |
||||
|
writer.onerror = reject |
||||
|
writer.seek(0) |
||||
|
writer.writeAsBinary(dataUrlToBase64(base64)) |
||||
|
}, reject) |
||||
|
}, reject) |
||||
|
}, reject) |
||||
|
}, reject) |
||||
|
return |
||||
|
} |
||||
|
var bitmap = new plus.nativeObj.Bitmap(fileName) |
||||
|
bitmap.loadBase64Data(base64, function() { |
||||
|
bitmap.save(filePath, {}, function() { |
||||
|
bitmap.clear() |
||||
|
resolve(filePath) |
||||
|
}, function(error) { |
||||
|
bitmap.clear() |
||||
|
reject(error) |
||||
|
}) |
||||
|
}, function(error) { |
||||
|
bitmap.clear() |
||||
|
reject(error) |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) { |
||||
|
var filePath = wx.env.USER_DATA_PATH + '/' + fileName |
||||
|
wx.getFileSystemManager().writeFile({ |
||||
|
filePath: filePath, |
||||
|
data: dataUrlToBase64(base64), |
||||
|
encoding: 'base64', |
||||
|
success: function() { |
||||
|
resolve(filePath) |
||||
|
}, |
||||
|
fail: function(error) { |
||||
|
reject(error) |
||||
|
} |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
reject(new Error('not support')) |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
{ |
||||
|
"id": "mmmm-image-tools", |
||||
|
"name": "image-tools", |
||||
|
"version": "1.4.0", |
||||
|
"description": "图像转换工具，可用于图像和base64的转换", |
||||
|
"keywords": [ |
||||
|
"base64", |
||||
|
"保存", |
||||
|
"图像" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
## 1.1.1（2023-08-01） |
||||
|
优化文档 |
||||
|
## 1.1.0（2023-08-01） |
||||
|
优化文档 |
||||
|
## 1.0.9（2023-07-10） |
||||
|
优化文档 |
||||
|
## 1.0.8（2023-06-25） |
||||
|
优化文档 |
||||
|
## 1.0.7（2023-06-25） |
||||
|
优化文档 |
||||
|
## 1.0.6（2023-05-26） |
||||
|
优化文档 |
||||
|
## 1.0.5（2023-05-22） |
||||
|
优化文档 |
||||
|
## 1.0.4（2023-04-30） |
||||
|
新增图片放大功能，解决原生组件和tabbar导航栏等无法覆盖的问题 |
||||
|
## 1.0.3（2023-04-28） |
||||
|
优化文档 |
||||
|
## 1.0.2（2023-04-28） |
||||
|
优化文档 |
||||
|
## 1.0.1（2023-04-28） |
||||
|
新增长按事件 |
||||
|
## 1.0.0（2023-04-28） |
||||
|
插件上线 |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<view class="previewImage" v-if="show" @tap="close"> |
||||
|
<!-- <view class="previewImage" v-if="show"> --> |
||||
|
<view class="page" v-if="urls.length > 0"> |
||||
|
<text class="text">{{ current + 1 }} / {{ urls.length }}</text> |
||||
|
</view> |
||||
|
<view class="texts">×</view> |
||||
|
<swiper class="swiper" :current="current" @change="swiperChange" @touchstart="handleTouchStart" @touchend="handleTouchEnd"> |
||||
|
<swiper-item v-for="(item, index) in urls" :key="index"> |
||||
|
<movable-area class="movable-area" scale-area> |
||||
|
<movable-view class="movable-view" direction="all" :inertia="true" damping="100" scale="true" scale-min="1" scale-max="4" :scale-value="scale"> |
||||
|
<scroll-view scroll-y="true" class="uni-scroll-view"> |
||||
|
<view class="scroll-view"><image :key="index" class="image" :src="item" mode="widthFix" @longpress="onLongpress(item)" /></view> |
||||
|
</scroll-view> |
||||
|
</movable-view> |
||||
|
</movable-area> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
urls: { |
||||
|
type: Array, |
||||
|
required: true, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
show: false, |
||||
|
current: 0, //当前页 |
||||
|
scale: 1, |
||||
|
isZooming: false // 是否处于缩放状态 |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
//打开 |
||||
|
open(current) { |
||||
|
this.current = this.urls.findIndex(item => item === current); |
||||
|
this.show = true; |
||||
|
this.$emit('open'); |
||||
|
}, |
||||
|
//关闭 |
||||
|
close() { |
||||
|
if (!this.isZooming) { |
||||
|
this.show = false; |
||||
|
this.current = 0; |
||||
|
this.$emit('close'); |
||||
|
} |
||||
|
}, |
||||
|
//图片改变 |
||||
|
swiperChange(e) { |
||||
|
this.current = e.detail.current; |
||||
|
}, |
||||
|
//监听长按 |
||||
|
onLongpress(e) { |
||||
|
this.$emit('onLongpress', e); |
||||
|
}, |
||||
|
handleTouchStart() { |
||||
|
this.isZooming = true; |
||||
|
}, |
||||
|
handleTouchEnd() { |
||||
|
this.isZooming = false; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.previewImage { |
||||
|
z-index: 9999; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
.swiper { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
swiper-item { |
||||
|
.movable-area { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
.movable-view { |
||||
|
width: 100%; |
||||
|
min-height: 100%; |
||||
|
.scroll-view { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 100vh; |
||||
|
.image { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.page { |
||||
|
position: absolute; |
||||
|
z-index: 9999; |
||||
|
width: 100%; |
||||
|
top: 60rpx; |
||||
|
text-align: center; |
||||
|
.text { |
||||
|
color: #fff; |
||||
|
font-size: 32rpx; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
padding: 3rpx 16rpx; |
||||
|
border-radius: 20rpx; |
||||
|
user-select: none; |
||||
|
} |
||||
|
} |
||||
|
.texts{ |
||||
|
font-size: 23px; |
||||
|
width: 28px; |
||||
|
height: 28px; |
||||
|
line-height: 28px; |
||||
|
position: absolute; |
||||
|
top: 55rpx; |
||||
|
right: 50rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
border: 1px solid #fff; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,81 @@ |
|||||
|
{ |
||||
|
"id": "q-previewImage", |
||||
|
"displayName": "图片预览、多图左右滑动、图片放大、支持覆盖原生组件、原生导航栏、tabbar", |
||||
|
"version": "1.1.1", |
||||
|
"description": "最简洁的模拟图片预览,支持长按事件，多图左右滑动，大图上下滑动查看，支持图片放大，支持覆盖原生组件/原生导航栏/tabbar 支持vue2/vue3/app/小程序/h5", |
||||
|
"keywords": [ |
||||
|
"图片预览" |
||||
|
], |
||||
|
"repository": "", |
||||
|
"engines": { |
||||
|
"HBuilderX": "^3.4.14" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"type": "component-vue", |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "无", |
||||
|
"data": "无", |
||||
|
"permissions": "无" |
||||
|
}, |
||||
|
"npmurl": "" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": [], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "y", |
||||
|
"aliyun": "y" |
||||
|
}, |
||||
|
"client": { |
||||
|
"Vue": { |
||||
|
"vue2": "y", |
||||
|
"vue3": "y" |
||||
|
}, |
||||
|
"App": { |
||||
|
"app-vue": "y", |
||||
|
"app-nvue": "n" |
||||
|
}, |
||||
|
"H5-mobile": { |
||||
|
"Safari": "y", |
||||
|
"Android Browser": "u", |
||||
|
"微信浏览器(Android)": "u", |
||||
|
"QQ浏览器(Android)": "u" |
||||
|
}, |
||||
|
"H5-pc": { |
||||
|
"Chrome": "u", |
||||
|
"IE": "u", |
||||
|
"Edge": "u", |
||||
|
"Firefox": "u", |
||||
|
"Safari": "u" |
||||
|
}, |
||||
|
"小程序": { |
||||
|
"微信": "y", |
||||
|
"阿里": "u", |
||||
|
"百度": "u", |
||||
|
"字节跳动": "u", |
||||
|
"QQ": "u", |
||||
|
"钉钉": "u", |
||||
|
"快手": "u", |
||||
|
"飞书": "u", |
||||
|
"京东": "u" |
||||
|
}, |
||||
|
"快应用": { |
||||
|
"华为": "u", |
||||
|
"联盟": "u" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,244 @@ |
|||||
|
# 最简洁的模拟图片预览,支持长按事件，多图左右滑动，大图上下滑动查看，支持图片放大，支持覆盖原生组件/原生导航栏/tabbar 支持vue2/vue3/app/小程序/h5 |
||||
|
|
||||
|
- 为了解决项目中因一些特殊原因无法使用uni.previewImage，例如App.onShow或者页面的oShow中写了方法。 |
||||
|
- 如果用uni.previewImage，每次预览图片都会进到onShow的方法里 |
||||
|
- 可以基本实现官方的预览图片功能，但是体验不如uni.previewImage() |
||||
|
- 如没有特殊原因，还是推荐官方的uni.previewImage() |
||||
|
|
||||
|
## 安装指引 |
||||
|
|
||||
|
##1. 在插件市场打开本插件页面，在右侧点击`使用 HBuilderX 导入插件`，选择要导入的项目点击确定 |
||||
|
|
||||
|
##2. 使用方法 vue2写法 |
||||
|
|
||||
|
``` |
||||
|
<template> |
||||
|
<view> |
||||
|
<video v-if="videoShow" id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" controls></video> |
||||
|
<image v-for="(item, index) in imgs" :key="index" :src="item" @click="preview(item)"></image> |
||||
|
<q-previewImage ref="previewImage" :urls="imgs" @onLongpress="onLongpress" @open="open" @close="close"></q-previewImage> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
videoShow:true,//video组件是否显示 |
||||
|
imgs: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
preview(url) { |
||||
|
this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'] //设置图片数组 |
||||
|
// #ifdef MP-WEIXIN |
||||
|
this.$nextTick(()=>{ |
||||
|
this.$refs.previewImage.open(url); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图) |
||||
|
}) |
||||
|
// #endif |
||||
|
|
||||
|
// #ifndef MP-WEIXIN |
||||
|
this.$refs.previewImage.open(url); // 传入当前选中的图片地址 |
||||
|
// #endif |
||||
|
}, |
||||
|
onLongpress(e){ //长按事件 |
||||
|
console.log('当前长按的图片是' + e); |
||||
|
uni.showActionSheet({ |
||||
|
itemList: ['转发给朋友', '保存到手机'], |
||||
|
success: function (res) { |
||||
|
console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); |
||||
|
}, |
||||
|
fail: function (res) { |
||||
|
console.log(res.errMsg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/* open和close方法一般用不到，但是在一些特殊场景会用到， |
||||
|
* 比如预览图片时你需要覆盖 NavigationBar和 TabBar， |
||||
|
* 或者在app中需要预览图片时覆盖住原生组件，比如video或者map等， |
||||
|
* 你可以根据open和close去做一些操作，例如隐藏导航栏或者隐藏一些原生组件等 |
||||
|
*/ |
||||
|
open(){ //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件） |
||||
|
// uni.hideTabBar() |
||||
|
// uni.setNavigationBarColor({ |
||||
|
// frontColor: '#000000', // 设置前景色为黑色 |
||||
|
// backgroundColor: '#000000', // 设置背景色为黑色 |
||||
|
// }) |
||||
|
// this.videoShow = false |
||||
|
}, |
||||
|
close(){ //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件） |
||||
|
// uni.showTabBar() |
||||
|
// uni.setNavigationBarColor({ |
||||
|
// frontColor: '#ffffff', // 设置前景色为白色 |
||||
|
// backgroundColor: '#000000', // 设置背景色为黑色 |
||||
|
// }) |
||||
|
// this.videoShow = true |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
``` |
||||
|
|
||||
|
##3. vue3 setup写法 |
||||
|
|
||||
|
``` |
||||
|
|
||||
|
<template> |
||||
|
<view> |
||||
|
<video v-if="videoShow" id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" controls></video> |
||||
|
<image v-for="(item, index) in imgs" :key="index" :src="item" @click="preview(item)"></image> |
||||
|
<q-previewImage ref="previewImage" :urls="imgs" @onLongpress="onLongpress" @open="open" @close="close"></q-previewImage> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { reactive, ref, toRefs,nextTick } from 'vue'; |
||||
|
|
||||
|
const data = reactive({ |
||||
|
videoShow:true,//video组件是否显示 |
||||
|
imgs: [], |
||||
|
}); |
||||
|
const previewImage = ref(null); |
||||
|
|
||||
|
const { imgs,videoShow } = toRefs(data)// 解构 |
||||
|
|
||||
|
const preview = url => { |
||||
|
data.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'] //设置图片数组 |
||||
|
|
||||
|
|
||||
|
// #ifdef MP-WEIXIN |
||||
|
nextTick(()=>{ |
||||
|
previewImage.value.open(url); // 传入当前选中的图片地址(小程序必须添加nextTick，解决组件首次加载无图) |
||||
|
}) |
||||
|
// #endif |
||||
|
|
||||
|
// #ifndef MP-WEIXIN |
||||
|
previewImage.value.open(url); // 传入当前选中的图片地址 |
||||
|
// #endif |
||||
|
}; |
||||
|
|
||||
|
const onLongpress = e =>{ |
||||
|
console.log('当前长按的图片是' + e); |
||||
|
uni.showActionSheet({ |
||||
|
itemList: ['转发给朋友', '保存到手机'], |
||||
|
success: function (res) { |
||||
|
console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); |
||||
|
}, |
||||
|
fail: function (res) { |
||||
|
console.log(res.errMsg); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/* open和close方法一般用不到，但是在一些特殊场景会用到， |
||||
|
* 比如预览图片时你需要覆盖 NavigationBar和 TabBar， |
||||
|
* 或者在app中需要预览图片时覆盖住原生组件，比如video或者map等， |
||||
|
* 你可以根据open和close去做一些操作，例如隐藏导航栏或者隐藏一些原生组件等 |
||||
|
*/ |
||||
|
const open = () => { //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件） |
||||
|
// uni.hideTabBar() |
||||
|
// uni.setNavigationBarColor({ |
||||
|
// frontColor: '#000000', // 设置前景色为黑色 |
||||
|
// backgroundColor: '#000000', // 设置背景色为黑色 |
||||
|
// }) |
||||
|
// data.videoShow = false |
||||
|
} |
||||
|
|
||||
|
const close = () => { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件） |
||||
|
// uni.showTabBar() |
||||
|
// uni.setNavigationBarColor({ |
||||
|
// frontColor: '#ffffff', // 设置前景色为白色 |
||||
|
// backgroundColor: '#000000', // 设置背景色为黑色 |
||||
|
// }) |
||||
|
// data.videoShow = true |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
``` |
||||
|
|
||||
|
##4. 项目示例 (一般返回的数据图片是以逗号或特殊字符分割的字符串，点击时就需要传两个参数，一个是图片数组，一个是当前图片的index) |
||||
|
## 注意q-previewImage不要写在循环体中，imgs其实就是用来存放当前图片的数组，每次点击每次赋值就行 |
||||
|
|
||||
|
``` |
||||
|
<template> |
||||
|
<view> |
||||
|
<video v-if="videoShow" id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" controls></video> |
||||
|
<view v-for="(item, index) in list" :key="index" class="list"> |
||||
|
<image :src="i" mode="aspectFill" v-for="(i,imgindex) in item.urls.split(',')" @click.stop="preimg(item.urls.split(','),imgindex)"></image> |
||||
|
<view> |
||||
|
<q-previewImage ref="previewImage" :urls="imgs" @onLongpress="onLongpress" @open="open" @close="close"></q-previewImage> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
videoShow:true,//是否显示video组件 |
||||
|
imgs: [],//imgs其实就是用来存放当前图片的数组，每次点击每次赋值就行 |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
preimg(urls,index){ |
||||
|
this.imgs = urls //imgs其实就是用来存放当前图片的数组，每次点击每次赋值就行 |
||||
|
// #ifdef MP-WEIXIN |
||||
|
this.$nextTick(()=>{ |
||||
|
this.$refs.previewImage.open(this.imgs[index]); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图) |
||||
|
}) |
||||
|
// #endif |
||||
|
|
||||
|
// #ifndef MP-WEIXIN |
||||
|
this.$refs.previewImage.open(this.imgs[index]); // 传入当前选中的图片地址 |
||||
|
// #endif |
||||
|
}, |
||||
|
onLongpress(e){ //长按事件 |
||||
|
console.log('当前长按的图片是' + e); |
||||
|
uni.showActionSheet({ |
||||
|
itemList: ['转发给朋友', '保存到手机'], |
||||
|
success: function (res) { |
||||
|
console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); |
||||
|
}, |
||||
|
fail: function (res) { |
||||
|
console.log(res.errMsg); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
/* open和close方法一般用不到，但是在一些特殊场景会用到， |
||||
|
* 比如预览图片时你需要覆盖 NavigationBar和 TabBar， |
||||
|
* 或者在app中需要预览图片时覆盖住原生组件，比如video或者map等， |
||||
|
* 你可以根据open和close去做一些操作，例如隐藏导航栏或者隐藏一些原生组件等 |
||||
|
*/ |
||||
|
open(){ //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件） |
||||
|
// uni.hideTabBar() |
||||
|
// uni.setNavigationBarColor({ |
||||
|
// frontColor: '#000000', // 设置前景色为黑色 |
||||
|
// backgroundColor: '#000000', // 设置背景色为黑色 |
||||
|
// }) |
||||
|
// this.videoShow = false |
||||
|
}, |
||||
|
close(){ //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件） |
||||
|
// uni.showTabBar() |
||||
|
// uni.setNavigationBarColor({ |
||||
|
// frontColor: '#ffffff', // 设置前景色为白色 |
||||
|
// backgroundColor: '#000000', // 设置背景色为黑色 |
||||
|
// }) |
||||
|
// this.videoShow = true |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
``` |
||||
|
|
||||
|
|
||||
|
## 如果插件对您有一点帮助，请给个五星好评，感谢支持 |
||||
|
|
||||
|
|
||||
|
## 如有问题，请加qq 965969604 |
||||
@ -0,0 +1,93 @@ |
|||||
|
{ |
||||
|
"resultCode": "00000000", |
||||
|
"resultMsg": "SUCCESS", |
||||
|
"data": { |
||||
|
"pageRows": 10, |
||||
|
"pageIndex": 1, |
||||
|
"pageOrder": null, |
||||
|
"pageDataSize": 324, |
||||
|
"pageSize": 33, |
||||
|
"pageDataList": [ |
||||
|
{ |
||||
|
"contextId": "972135119269793820", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "公告丨全国文化大数据交易中心文化资源数据标的成交公告", |
||||
|
"contextCreationTime": "2024-04-01 11:18:59", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "971038085523574834", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "数据超市丨《水浒传》系列精品文化资源数据类标的：吴学究双掌连环计 宋公明三打祝家庄", |
||||
|
"contextCreationTime": "2024-03-29 10:39:46", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "969606242278445102", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "公告丨全国文化大数据交易中心交易主体进场公告【腾讯云计算(北京)有限责任公司】", |
||||
|
"contextCreationTime": "2024-03-25 11:50:08", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "968499733108756490", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "公告丨全国文化大数据交易中心交易主体进场公告【深圳市其域创新科技有限公司】", |
||||
|
"contextCreationTime": "2024-03-22 10:33:15", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "967135031296397373", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "数据超市丨《水浒传》系列精品文化资源数据类标的：卢俊义分兵歙州道 宋公明大战乌龙岭", |
||||
|
"contextCreationTime": "2024-03-18 16:10:25", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "962763066871779370", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "数据超市丨《三国演义》系列精品文化资源数据类标的：曹操平定汉中地，张辽威震逍遥津", |
||||
|
"contextCreationTime": "2024-03-06 14:37:48", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "960885697982631998", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "数据超市丨《红楼梦》系列精品文化资源数据类标的：“真假”宝玉会面，地藏庵劝惜春出家", |
||||
|
"contextCreationTime": "2024-03-01 10:17:48", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "959808218010357765", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "热血水浒丨柴进门招天下客，林冲棒打洪教头", |
||||
|
"contextCreationTime": "2024-02-27 10:56:17", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "957250035354046480", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "梦回红楼丨比通灵金莺微露意，探宝钗黛玉半含酸", |
||||
|
"contextCreationTime": "2024-02-20 09:30:58", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
}, |
||||
|
{ |
||||
|
"contextId": "952901732248195122", |
||||
|
"contextConsultingId": "762033233176170504", |
||||
|
"contextTitle": "公告丨全国文化大数据交易中心交易主体进场公告【西安当时商业运营管理有限责任公司】", |
||||
|
"contextCreationTime": "2024-02-08 09:32:22", |
||||
|
"contextStatus": 0, |
||||
|
"contextUsername": "chanpin" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue