轮播图左右滑动:

html部分:

<swiper :indicator-dots="true" :indicator-color="rgba(0,0,0,.3)" :autoplay="true" :interval="2000" :duration="600">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view>{{item.contents}}</view>
			</swiper-item>
		</swiper>
script部分:

data() {
			return {
				list: [{
						contents: "热门1"
					},
					{
						contents: "热门2"
					},
					{
						contents: "热门3"
					},
					{
						contents: "热门4"
					}
				]
			}
		},
css部分:

swiper-item {
		width:100%;
		height:200rpx;
		background-color: #ff0000;
	}

详细swiper属性介绍,官方地址链接:https://uniapp.dcloud.io/component/swiper

Logo

云原生社区为您提供最前沿的新闻资讯和知识内容

更多推荐