<template>
<view class="flex-column">
<text>服务</text>
<image src="https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265371035brw39nqwnsw.png"
@load="onImageLoad" @error="onImageError"></image>
<view class="flex-column">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration">
<swiper-item class="swiper-item" v-for="item in imageList" :key="item">
<image class="swiper-item" :src="item" @load="onImageLoad" @error="onImageError"></image>
</swiper-item>
</swiper>
</view>
</view> </template>
<script>
export default {
data() {
return {
screeHeight: document.body.clientHeight, // 屏幕高
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
imageList: ["https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265371035brw39nqwnsw.png",
"https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265557442g6298w0hedu.jpg",
"https://ztuo-wy.oss-cn-beijing.aliyuncs.com/20210910/1631265697736s02y6uysgwq.png"
],
}
},
components: {
},
computed: {
measureHeigth() {
return (this.screeHeight - 100) + 'px';
}
},
methods: {
onImageLoad(e) {
console.log("onImageLoad =" + JSON.stringify(e))
},
onImageError(e) {
console.log("onImageError =" + JSON.stringify(e))
}
}
} </script>
<style lang="scss">
.flex-column {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.banner {
width: 686rpx;
height: 343rpx;
}
.swiper {
height: 300rpx;
width: 600rpx
}
.swiper-item {
height: 300rpx;
width: 600rpx
} </style>
Syson (作者)
已经修改，上传完整实例，在真机环境，Android原生代码启动uniApp，无法加载出来图片
2021-10-21 17:11
DCloud_UNI_Anne
回复 Syson: 运行你的示例，body相关报错内容去除，swiper正常，未复现问题。
2021-10-25 15:44
Syson (作者)
回复 DCloud_UNI_Anne: 请问是哪些内容报错？
2021-10-26 14:25
DCloud_UNI_Anne
回复 Syson: document.body.clientHeight，这部分报错。获取系统信息可用uni.getSystemInfo，详见文档
2021-10-26 14:29