微信小程序tab切换滑动

wxml代码

<view>
	<view class="order-list-tit">
		<view class="sel {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">点餐</view>
		<view class="sel {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">订餐</view>
	</view>
	<view>
		<swiper class="swiper" current="{{currentTab}}" duration="200" bindchange="swiperChange">
			<swiper-item>
				<view>我是点餐</view>
			</swiper-item>
			<swiper-item>
				<view>我是订餐</view>
			</swiper-item>
		</swiper>
	</view>
</view>

js代码

Page({
  data: {
    currentTab: 0,
  },
swichNav: function (e) {
		console.log(e);
		var that = this;
		if (this.data.currentTab === e.target.dataset.current) {
			return false;
		} else {
			that.setData({
				currentTab: e.target.dataset.current,
			})
		}
	},
swiperChange: function (e) {
		console.log(e);
		this.setData({
			currentTab: e.detail.current,
		})
	},
})

wxss代码

.order-list-tit {
	width: 375px;
	height: 48px;
	background: #ffffff;
	border-radius: 12px 12px 0px 0px;
	display: flex;
	position: relative;
}


.order-list-tit view:nth-of-type(1) {
	margin-left: 24px;
	margin-right: 32px;
}

.sel {
	width: 36px;
	height: 25px;
	font-size: 18px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	color: #999999;
	margin-top: 16px;
	text-align: center;
}

.on {
	width: 36px;
	height: 25px;
	font-size: 18px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	color: #121212;
	text-align: center;
}

.on:after {
	content: '';
	position: absolute;
	left: auto;
	bottom: 2px;
	right: auto;
	width: 24px;
	height: 5px;
	background: linear-gradient(117deg, #FFF100 0%, #FFDE00 100%);
	border-radius: 3px;
	margin-left: -60rpx;
}

不滑动删除删除swiper标签跟swiperChange方法

<view>
	<view class="order-list-tit">
		<view class="sel {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">点餐</view>
		<view class="sel {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">订餐</view>
	</view>
	<view>
			<view hidden="{{currentTab!=0}}">
				<view>我是点餐</view>
			</view>
			<view hidden="{{currentTab!=1}}">
				<view>我是订餐</view>
			</view>
	</view>
</view>