移动端轮播图 (三张图三张图的轮播)

效果就是像这样 , 三张图三张图的轮播 , 本文会讲vue 和uni-app 中分别怎么实现 , 其实写法是一样的, 只是组件标签不一样

vue中 , 用的vant组件库 

Vant 2 - Mobile UI Components built on Vue

template

<van-swipe class="swipe" :autoplay="2000" indicator-color="black">
          <van-swipe-item v-for="(item,index) in swperList " :key="index">
                    <div class="swpierBox">
                          <div v-for="(item,index) in item" :key="index">
                               <img :src="item.imgUrl" alt="">
                               <span> {{item.txt}} </span>
                               <img src="../assets/home/3.png" alt="" class="btn">
                           </div>
                    </div>
           </van-swipe-item>
</van-swipe>

script

 //直播轮播图列表
                swperList: [
                    [{
                        txt: "旅游是一场最有意义的社交活动， 心情调味剂 ",
                        imgUrl: require("../assets/home/banner1.jpg")
                    }, {
                        txt: "全方位地感受到旅游产品特点 ",
                        imgUrl: require("../assets/home/banner2.jpg")
                    }, {
                        txt: "从而催生了体验式营销 ",
                        imgUrl: require("../assets/home/banner3.jpg")
                    }],
                    [{
                        txt: "旅游是一场最有意义的社交活动， 心情调味剂 ",
                        imgUrl: require("../assets/home/banner1.jpg")
                    }, {
                        txt: "全方位地感受到旅游产品特点 ",
                        imgUrl: require("../assets/home/banner2.jpg")
                    }, {
                        txt: "从而催生了体验式营销 ",
                        imgUrl: require("../assets/home/banner3.jpg")
                    }],


                ]

style

   .swipe {
                height: 4.8rem;

                .swpierBox {
                    height: 3rem;
                    display: flex;

                    div {
                        position: relative;
                        width: 33%;
                        height: 100%;
                        margin: 0.13rem;

                        img {
                            width: 100%;
                        }

                        span {
                            color: #606060;
                            font-size: 0.29rem;

                        }

                        .btn {
                            position: absolute;
                            top: 1.2rem;
                            width: 0.69rem;
                            height: 0.69rem;
                            left: 1.1rem;
                        }
                    }
                }
            }

uni-app中 , 就是用的官网的组件

uni-app官网

template

<swiper class="swipe" indicator-dots circular autoplay interval=2000>
		<swiper-item v-for="(item,index) in liveSwiperList" :key="index">
			 <view class="swpierBox">
					<view v-for="(item,index) in item"  :key="index">
						<img :src="item.imgUrl" alt="">
						<span> {{item.txt}} </span>
						<img src="../../static/home/3.png" alt="" class="btn">
					</view>
			 </view>
		</swiper-item>
					
</swiper>

script

// 直播轮播图列表
				liveSwiperList: [
					[{
						txt: "旅游是一场最有意义的社交活动， 心情调味剂 ",
						imgUrl: require("../../static/home/banner1.jpg")
					}, {
						txt: "全方位地感受到旅游产品特点 ",
						imgUrl: require("../../static/home/banner2.jpg")
					}, {
						txt: "从而催生了体验式营销 ",
						imgUrl: require("../../static/home/banner3.jpg")
					}],
					[{
						txt: "旅游是一场最有意义的社交活动， 心情调味剂 ",
						imgUrl: require("../../static/home/banner1.jpg")
					}, {
						txt: "全方位地感受到旅游产品特点 ",
						imgUrl: require("../../static/home/banner2.jpg")
					}, {
						txt: "从而催生了体验式营销 ",
						imgUrl: require("../../static/home/banner3.jpg")
					}],
				],

style

 .swipe {
				height: 440rpx;

				/deep/ .uni-swiper-dot {
					margin-right: 16rpx;
					width: 28rpx;
					height: 3px;
					border-radius: 2px;
				}



				.swpierBox {
					height: 250rpx;
					display: flex;

					view {
						position: relative;
						width: 34%;
						height: 100%;
						margin: 10rpx;

						img {
							width: 100%;
							height: 100%;
						}

						span {
							color: #606060;
							font-size: 0.29rem;

						}

						.btn {
							position: absolute;
							top: 40%;
							width: 52rpx;
							height: 52rpx;
							left: 40%;
						}

					}
				}
			}