uniapp小程序系列-11首页顶部swiper文字+点击切页

1.创建swiper组件

2.写topBar

3.循环一下

<scroll-view scroll-x="true" >
			<view
				v-for='(item,index) in topBar'
				:key='index'
			>
				<text>{{item,name}}</text>
			</view>
		</scroll-view>

4.定义样式

<style scoped>
.scroll-content{
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item{
	display: inline-block;
	padding:10rpx 30rpx;
	font-size:32rpx;
}
</style>

5.默认选中

.f-active-color{
	padding:10rpx 0;
	border-bottom:6rpx solid #49BDFB;
}

6.选中变色判断

设置索引

判断

<text :class='topBarIndex===index? "f-active-color":"f-color"'>{{item.name}}</text>

7.选中变色(加事件)

1°

2°

8.点击切页面

相当于整体的滑动,一整个页面的切换

1°添加swiper

2°不用手动添那么多,直接循环

9.上面点之后,下面跟着动(事件)

最外面的额swiper加事件

写方法

10.完成

点击哪个就切到哪页