<template>
<view class="xb-image-x" :class="new Map<string, boolean>([['unScaleToFill',mode !== 'scaleToFill']])">
<image class="xb-image-x-image" :src="src" :mode="mode" :lazy-load="lazyLoad" :fade-show="fadeShow" :webp="webp"
:show-menu-by-longpress="showMenuByLongpress" :draggable="draggable" @error="onError" @load="onLoad" v-if="src">
</image>
<!-- <text style="color: #fff; position: absolute; left: 0; top: 0; z-index: 99999; font-size: 40rpx;">{{status}}</text> -->
<template v-if="showLoading">
<view class="loading" v-if="status === 'loading'">
<image class="loading-image" src="/uni_modules/xb-image-x/static/xbImageXplaceholder.png" mode="aspectFill">
</image>
<view class="animation">
<view style="width: 100px; height: 50px; margin: 0 auto;">
<xb-n-lottie :json="lottieLoadingJson"></xb-n-lottie>
</view>
</view>
</view>
</template>
</view>
</template>
<script setup>
import lottieLoadingJson from '@/static/lottie/Loading.json'
const emit = defineEmits(['error', 'load'])
const props = defineProps({
bindclass: {
type: String,
default: '',
},
src: {
type: String,
default: '',
},
mode: {
type: String,
default: 'scaleToFill',
},
lazyLoad: {
type: Boolean,
default: false,
},
fadeShow: {
type: Boolean,
default: false,
},
webp: {
type: Boolean,
default: true,
},
showMenuByLongpress: {
type: Boolean,
default: false,
},
draggable: {
type: Boolean,
default: false,
},
showLoading: {
type: Boolean,
default: true,
},
})
const status = ref('loading')
// 加载失败
const onError = (event: UniImageErrorEvent) => {
status.value = 'error'
emit('error', event)
}
// 加载成功
const onLoad = (event: UniImageLoadEvent) => {
status.value = 'success'
emit('load', event)
}
onMounted(() => {
removeHidden.value = true;
})
</script>
xb-n-lottie.uvue
<template>
<!-- <view class="native-view-box"> -->
<native-view class="native-view" @init="onviewinit"></native-view>
<!-- </view> -->
</template>
<script setup lang="uts">
// #ifdef APP-IOS
import { NativeView } from "@/uni_modules/xb-lottie";
// #endif
let nativeView : NativeView | null = null
//声明属性
const props = defineProps<{
json : UTSJSONObject
}>()
//声明事件
const emit = defineEmits<{
(e : "init", event : UniNativeViewInitEvent) : void
}>()
//native-view初始化时触发此方法
function onviewinit(e : UniNativeViewInitEvent) {
console.log(e.detail.element)
}
defineExpose({
})
function onUnmounted() {
nativeView?.destroy()
}
onBeforeUnmount(() => {
onUnmounted()
})
</script>
0 个回复