uni-app 多图横屏轮播
uni-app 多图横屏轮播
uniapp 实现 多图横屏自动滚动的无缝轮播
信息类型 | 信息内容 |
---|---|
开发环境 | |
版本号 | |
项目创建 |
1 回复
在uni-app中实现多图横屏轮播,你可以使用<swiper>
组件,并结合CSS样式设置横屏展示。以下是一个简单的代码示例,展示了如何实现这一功能:
1. 页面结构(template)
<template>
<view class="container">
<swiper
class="swiper"
indicator-dots="true"
autoplay="true"
interval="3000"
duration="500"
circular="true"
style="height: 100vh;"
>
<block v-for="(image, index) in images" :key="index">
<swiper-item>
<image :src="image" class="slide-image" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
</view>
</template>
2. 样式(style)
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.swiper {
width: 100%;
height: 100%;
}
.slide-image {
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
3. 脚本(script)
<script>
export default {
data() {
return {
images: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg',
// 更多图片URL...
],
};
},
};
</script>
4. 注意事项
indicator-dots
:设置为true
以显示指示点。autoplay
:设置为true
以自动播放轮播图。interval
:设置自动切换时间间隔,单位为毫秒。duration
:设置滑动动画时长,单位为毫秒。circular
:设置为true
以实现无缝衔接。- 图片模式:
<image>
组件的mode
属性设置为aspectFill
,确保图片按比例缩放并填充容器。
5. 横屏处理
为了确保应用横屏显示,你需要在manifest.json
中配置屏幕方向:
"app-plus": {
"distribute": {
"sdkConfigs": {
"android": {
"screenOrientation": "landscape"
},
"ios": {
"infoPlist": {
"UISupportedInterfaceOrientations": ["UIInterfaceOrientationLandscapeLeft", "UIInterfaceOrientationLandscapeRight"]
}
}
}
}
}
以上代码展示了如何在uni-app中实现多图横屏轮播。你可以根据实际需求调整图片URL、轮播间隔、动画时长等参数。