微信小程序页签切换-swiper滑块

前言：swiper是滑块视图容器，swiper里面只能放swiper-item。点击、滑动这两个事件会改变改current 值，点击或者滑动都会修改current绑定的值，则会切换到对应的下标index也就是显示swiper里面的对应的swiper-item。

---

swiper的更多属性可以去官网查看：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

---

PS：下标分为三项，分别是：今天、明天、后天;点击该项就会切换至对应的内容。

---

最终示例效果：

---

1.wxml

<view class="home" style="">
	
	<view class='log' style="">
		<view class="log_box" wx:for="{{list}}" wx:key wx:for-index="index" data-index="{{index}}" bindtap='switchNav'>
			<view class="{{currentTab==index?'selected':'default'}}">{{item.name}}</view>
		</view>
	</view>


	<swiper class="swiper_box" current='{{currentTab}}' bindchange='bindChange' style="">

		<swiper-item>
			<view>今天</view>
		</swiper-item>

		<swiper-item>
			<view>明天</view>
		</swiper-item>

		<swiper-item>
			<view>后天</view>
		</swiper-item>

	</swiper>
	
</view>

---

2.wxss

.home{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}

.log{height: 10%;display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;}

.default{color: black;}

.swiper_box{border: 1px solid red;height: 90%;margin: 0 20rpx;}

.log_box{padding-bottom: 20rpx;}

.selected{color: red;padding-bottom: 20rpx;border-bottom: 5rpx solid red;}

---

3.js

Page({
	data: {
		list: [{
				name: '今天'
			},
			{
				name: '明天'
			},
			{
				name: '后天'
			},
		],
		currentTab: 0,
	},

	// 点击切换
	switchNav: function(e) {
		var that = this;
		if (this.data.currentTab == e.currentTarget.dataset.index) {
			return false;
		} else {
			that.setData({
				currentTab: e.currentTarget.dataset.index
			});
		}
	},

	// 滑动切换
	bindChange: function(e) {
		// console.log(e)
		var that = this;
		that.setData({
			currentTab: e.detail.current
		});
	}
})