微信小程序頁籤切換-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
		});
	}
})