uniapp——轮播图、产品列表轮播、上一页、下一页、一屏三张图

案例展示

uniapp——轮播图、产品列表轮播、上一页、下一页、一屏三张图_第1张图片

组件封装

<template>
	<view>
		<view class="showSwiperBox">
			<view class="topSwiper">
				<swiper class="swiper" :autoplay="autoplay" interval="5000" :previous-margin="margin"
					:next-margin='margin' :circular="true" @change="swiperChange" :space-between="20"
					:current="current">
					<swiper-item v-for="(item,index) in list" :key="index" class="sw_item">
						<view class="itemImg">
							<image class='le-img' :src="item.src" :class="{'le-active':current == index}">image>
						view>
					swiper-item>
				swiper>
				<view class="sw_btn">

你可能感兴趣的:(uniapp——轮播图、产品列表轮播、上一页、下一页、一屏三张图)