uni-app 多图横屏轮播

发布于 1周前 作者 htzhanglong 来自 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、轮播间隔、动画时长等参数。

回到顶部