微信小程序实现一个简单的Tab可滑动的切换方式（代码）

本篇文章给大家带来的内容是关于微信小程序实现一个简单的Tab可滑动的切换方式（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

 最近一直在做小程序项目，对于不同需求来说真是烦不胜烦，之前做的订单页来说只需要可点击切换就可以，但是在后期的迭代中提到要求可滑动切换，下面我自己整理了一套比较简单暴力的滑动切换方式，与大家共享一下，下面有效果图。（菜鸟上路，不喜勿喷）：

.wxml 

 !--pages/mine/order/order.wxml-- 
 view >
.wxss
/* pages/mine/order/order.wxss */
.swiper-tab {
 width: 100%;
 border-bottom: 2rpx solid #ccc;
 text-align: center;
 height: 88rpx;
 line-height: 88rpx;
 display: flex;
 flex-flow: row;
 justify-content: space-between;
.swiper-tab-item {
 width: 30%;
 color: #434343;
 font-size: 28rpx;
.active {
 color: #f65959;
 border-bottom: 4rpx solid #f65959;
swiper {
 text-align: center;
 background-color: #fff
}
.js
// pages/mine/order/order.js
Page({
 * 页面的初始数据
 data: {
 currentTab: 0
 * 生命周期函数--监听页面加载
 onLoad: function (options) {
 //滑动切换
 swiperTab: function (e) {
 this.setData({
 currentTab: e.detail.current
 //点击切换
 clickTab: function (e) {
 if (this.data.currentTab === e.target.dataset.current) {
 return false;
 } else {
 this.setData({
 currentTab: e.target.dataset.current
})
效果图：

在wxml部分其实可以用个wx:for 来做。
相关推荐：
微信小程序实例：轮播图的代码实现与分析
 微信小程序中底部导航栏的实现代码
以上就是微信小程序实现一个简单的Tab可滑动的切换方式（代码）的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！