uniapp最简单的轮播图

html

<swiper class="swiper" autoplay="true" interval="3000" duration="1500" circular="true" indicator-dots="true">
	<swiper-item v-for="(item , index) in img" :key="index">
		<image :src="item" ></image>
	</swiper-item>
</swiper>

css

.honorswiper-item image{width: 100%;}
.swiper{height: 350rpx;width: 100%;margin: auto;}
.image{width: 100%; height:350rpx; display: flex;}

honor为轮播图外层盒子,可以随意更换

Uniapp 中实现卡片轮播图,可以通过使用组件库或自定义组件来实现。以下是一个简单的实现示例: 1. 首先,在你的 Uniapp 项目中引入需要的组件库,如 vant、uView 等。或者你可以自己编写一个自定义组件。 2. 在需要使用轮播图的页面中,引入轮播图组件: ```vue <template> <view> <swiper class="swiper-container" indicator-dots autoplay circular> <block v-for="(item, index) in swiperList" :key="index"> <swiper-item> <!-- 卡片内容 --> <view class="card"> <image :src="item.image" mode="aspectFill" class="card-image" /> <text>{{ item.title }}</text> </view> </swiper-item> </block> </swiper> </view> </template> <script> export default { data() { return { swiperList: [ { image: '图片地址1', title: '标题1', }, { image: '图片地址2', title: '标题2', }, // 依此类推 ], }; }, }; </script> <style> .card { width: 200px; /* 设置卡片宽度 */ height: 300px; /* 设置卡片高度 */ background-color: #f5f5f5; border-radius: 8px; } .card-image { width: 100%; height: 200px; /* 设置卡片中图片的高度 */ border-top-left-radius: 8px; border-top-right-radius: 8px; } </style> ``` 在上述代码中,我们使用了 `swiper` 组件和 `swiper-item` 组件来实现轮播图的效果。每个 `swiper-item` 中放置一个卡片内容,其中使用了 `image` 组件来显示图片,`text` 组件来显示标题。 你可以根据实际需求调整卡片的样式和轮播图的配置,例如设置自动轮播、指示器等。同时,也可以根据项目需要自定义组件样式和交互效果。 希望这个示例能够帮助到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值