前端大白 -- 小程序之自行封装轮播图组件

小程序之自行封装轮播图组件

案例展示:

先上代码:

子组件HTML部分:

<view class="ul">
			<view :class="direction == 'column' ? 'columnLi' : 'li'" id="liId" :animation="animate">
				<image id="imageId" @touchend="touchEnd" @touchmove="touchMove" @touchstart="touchStart" :src="item" mode="aspectFill"
				 v-for="(item,index) of bannerList" :key="index"></image>
			</view>
			<!-- 点索引 -->
			<view v-if="dotShowOne" :class="direction == 'column' ? 'column' : 'dotShow'">
				<view class="dot" :class="{'activeDot' : dotIndex == index}" v-for="(item,index) of dotList" :key="index"></view>
			</view>
			<!-- 分数索引 -->
			<view class="dotShow" v-if="dotShowtwo">
				{
  {dotIndex+1}} / {
  {length}}
			</view>
		</view>

上面代码中,可以根据自己的想要的轮播方向,进行轮播,只要传入参数direction : ‘column’ / ‘row’;
也可以选择索引点的样式.<