示例源码如下，请查看 pre > code 标签中的内容
<template>
<!-- #ifdef APP && !VUE3-VAPOR -->
<scroll-view class="uni-theme-root" style="flex: 1">
<!-- #endif -->
<view class="preview-page uni-theme-root">
<!-- #ifndef MP-ALIPAY -->
<view>
<text class="text-desc">图片指示器样式</text>
<radio-group class="cell-ct option-panel" @change="onIndicatorChanged">
<view class="indicator-it" v-for="(item, index) in indicator" :key="item.value">
<view class="option-item">
<radio :disabled="isWeb" :checked="index == 0" :value="item.value" />
<text>{{ item.name }}</text>
</view>
</view>
</radio-group>
</view>
<view>
<checkbox-group @change="onCheckboxChange" style="margin-top: 16px; margin-left: 8px">
<view class="option-item" style="margin-right: 15px"><checkbox :disabled="isWeb" :checked="isLoop" /><text>循环播放</text></view>
</checkbox-group>
</view>
<view>
<text class="text-desc">长按行为</text>
<radio-group class="cell-ct option-panel long-press-panel" @change="onLongPressCheckboxChange">
<view class="indicator-it" v-for="(item, index) in longPressAction" :key="item.value">
<view class="option-item">
<radio :disabled="isWeb" :checked="index == 1" :value="item.value" />
<text>{{ item.name }}</text>
</view>
</view>
</radio-group>
</view>
<!-- #endif -->
<view class="image-panel">
<text class="text-desc">点击图片开始预览</text>
<view class="cell-ct" style="margin: 8px;">
<view class="cell cell-choose-image" v-for="(image, index) in imageList" :key="index">
<text style="width: 100px; height: 100px;background-color: lightgray; color: red; text-align: center; line-height: 100px;font-size: 14px;" v-if="image.error"
@click="previewImage(index)">图片路径非法</text>
<image class="preview-image" mode="aspectFit" :src="image.src"
v-if="!image.error" @click="previewImage(index)"
@error="onImageLoadError(index,$event as ImageErrorEvent)">
</image>
</view>
<image class="cell cell-choose-image" src="/static/plus.png" @click="chooseImage">
</image>
</view>
</view>
<view class="notice-panel">
<text class="notice-title">注意事项:</text>
<text class="notice-text">1、indicator属性仅App平台支持。</text>
<text class="notice-text">2、Web平台不支持loop属性。</text>
</view>
</view>
<!-- #ifdef APP && !VUE3-VAPOR -->
</scroll-view>
<!-- #endif -->
</template>
<script setup lang="uts">
type Indicator = "number" | "default" | "none"
type ItemType = {
value : Indicator,
name : string
}
type ImageType = {
src : string,
error : boolean
}
type LongPressType = {
value : string,
name : string
}
const imageList = ref([
{ src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", error: false },
// 只支持 http 图片链接
// #ifndef MP-ALIPAY
{ src: "/static/test-image/logo.png", error: false },
{ src: "/static/test-image/logo.svg", error: false },
// #endif
// #ifdef APP
{ src: "/static/uni2.png", error: false },
// #endif
] as ImageType[])
const indicator = ref([{
value: "default",
name: "圆点"
}, {
value: "number",
name: "数字"
}, {
value: "none",
name: "不显示"
}] as ItemType[])
const longPressAction = ref([{
value: "0",
name: "默认长按行为"
}, {
value: "1",
name: "自定义长按行为"
}] as LongPressType[])
const currentIndicator = ref("default" as Indicator)
// #ifdef WEB
const isWeb = ref(true)
// #endif
// #ifndef WEB
const isWeb = ref(false)
// #endif
// #ifdef APP-IOS
const isIOS = ref(true)
// #endif
// #ifndef APP-IOS
const isIOS = ref(false)
// #endif
const isLongPress = ref(true)
const isLoop = ref(true)
const previewImage = (index : number) => {
let list = [] as Array<string>
imageList.value.forEach((item : ImageType) => {
list.push(item.src)
})
uni.previewImage({
urls: list,
current: index,
// #ifdef MP-ALIPAY
enableSavePhoto:true,
// #endif
// #ifndef MP-ALIPAY
indicator: currentIndicator.value,
loop: isLoop.value,
longPressActions: (isLongPress.value ? ({
itemList: ["按钮1", "按钮2", "按钮3"],
itemColor: "#ccc",
success: (e : LongPressActionsSuccessResult) => {
uni.showToast({
title: "用户选中了第" + (e.index + 1) + "张图片，并选中了第" + (e.tapIndex + 1) + "个选项",
position: "bottom"
})
},
fail: (e : LongPressActionsFailResult) => {
uni.showToast({
title: "用户关闭了action sheet",
position: "bottom"
})
}
} as LongPressActionsOptions) : null)
// #endif
})
}
const chooseImage = () => {
uni.chooseImage({
sourceType: ['album'],
count: 1,
success: (e) => {
imageList.value = imageList.value.concat({ src: e.tempFilePaths[0], error: false } as ImageType)
// imageList.value = imageList.value.concat(e.tempFilePaths)
},
fail(_) {
}
})
}
const onIndicatorChanged = (e : UniRadioGroupChangeEvent) => {
currentIndicator.value = e.detail.value as Indicator
}
const onCheckboxChange = (_ : UniCheckboxGroupChangeEvent) => {
isLoop.value = !isLoop.value
}
const onLongPressCheckboxChange = (e: UniRadioGroupChangeEvent) => {
isLongPress.value = (e.detail.value == "1")
}
const onImageLoadError = (index : number, error : UniImageErrorEvent) => {
imageList.value[index].error = true
}
const closePreviewImage = ()=>{
uni.closePreviewImage({})
uni.hideActionSheet()
}
const testSetCurrentIndicator = (value:string) =>{
currentIndicator.value = value as Indicator
}
defineExpose({
testSetCurrentIndicator,
previewImage,
closePreviewImage
})
</script>
<style>
.preview-page {
padding-left: 8px;
padding-right: 8px;
}
.text-desc {
margin-top: 16px;
margin-left: 8px;
margin-bottom: 16px;
font-weight: bold;
color: var(--text-color, #333333);
}
.cell-ct {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.option-panel,
.image-panel,
.preview-image {
background-color: var(--list-background-color, #ffffff);
}
.long-press-panel {
margin-bottom: 16px;
}
.preview-image {
width: 100px;
height: 100px;
}
.notice-panel {
margin: 8px;
}
.notice-title {
color: var(--text-color, #333333);
font-size: 18px;
margin-bottom: 4px;
}
.notice-text {
font-size: 17px;
margin-left: 4px;
color: var(--active-color, #808080);
}
.cell {
margin-left: 3px;
margin-right: 3px;
width: 100px;
height: 100px;
}
.cell-choose-image {
border-width: 1px;
border-style: solid;
border-color: var(--border-color, lightgray);
}
.indicator-it {
margin: 8px;
}
.option-item {
display: flex;
flex-direction: row;
align-items: center;
}
.cell-pd {
padding: 11px 0px;
}
</style>
