swiper横向选择器

码林鼠

于 2020-05-21 22:36:00 发布

阅读量366

点赞数

分类专栏： uniapp

本文链接：https://blog.csdn.net/weixin_41254345/article/details/106269183

版权

uniapp 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<swiper class="swiper" :indicator-dots="false" :autoplay="false" :current="initindex" @change="swiperchan">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="swiper-item" :class="curindex == index?'uni-bg-red':''">{{item}}</view>
			</swiper-item>
		</swiper>

list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
initindex: 3,
curindex: 3

swiperchan(e) {
				this.curindex = e.detail.current
			}

.swiper {
		background-color: red;
		height: 50rpx;

		swiper-item {
			left: 354rpx;
			transition: transform 100ms ease;
			width: 50rpx !important;

			.swiper-item {
				text-align: center;
			}

			.uni-bg-red {
				color: #fff;
			}
		}
	}
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200521223431323.png)
ps:水平滑动，中间为当前选择项，并将中奖的项设置突出样式