更新记录
1.0.1(2025-08-16) 下载此版本
三图轮流切换切换,自定义大小,动态数据
平台兼容性
uni-app(4.08)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.08)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | - | - | - | - |
幻灯片
vue3+TS: 小程序 H5都适用。
说明:可自定义大小、可自行修改样式、动态数据
使用:
页面中引入组件:
<template>
<!--广告轮播组件-->
<div v-if="adArr.length > 0">
<ad-slide :images="adArr" :interval="3000" :imgWidth="50"></ad-slide>
</div>
</template>
<script setup>
import adSlide from ‘@/components/ff-adSlide/ad-slide.vue’;//广告幻灯片切换轮播
import { onMounted,ref } from ‘vue’;
const adArr = ref([]);
onMounted(()=>{
adArr.value = [
{id:1,thumb:’/static/ad/01.jpg’,name:”广告1”,desc:””},
{id:2,thumb:’/static/ad/02.jpg’,name:”广告2”,desc:””},
{id:3,thumb:’/static/ad/03.jpg’,name:”广告3”,desc:””}
];
});
</script>
<style>
.swiper-container{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
</style>