1、效果图

2、index.wxml

<view class="swiper-tab"><view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}"  data-current="0" bindtap="swichNav">设备故障报修</view><view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}"  data-current="1" bindtap="swichNav">我报修的故障</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" style="height:{{winHeight - 31}}px" bindchange="bindChange"><swiper-item><!-- 此处用了自定义组件，大家可以通过这种方式，tab下面的内容进行填充 --><page1></page1></swiper-item><swiper-item><page2></page2></swiper-item>
</swiper>

3、index.wxss

.swiper-tab {width: 100%;text-align: center;line-height: 80rpx;
}.swiper-tab-list {font-size: 30rpx;display: inline-block;width: 50%;color: #777;
}.on {color: #09bb07;border-bottom: 3rpx solid #09bb07;
}.swiper-box {display: block;height: 100%;width: 100%;
}.swiper-box view {text-align: center;
}swiper-item {overflow: scroll;
}

4、index.js

Page({data: {winHeight: 0,currentTab: 0,},
//页面加载时，获得页面的高度，宽度在css样式中已经设置了100%，所以在此处不用获取和设置onLoad: function () {var that = this;wx.getSystemInfo({success: function (res) {that.setData({winHeight: res.windowHeight});}});},
//全程都用currentTab进行控制，此处的e.target.dataset.current对应wxml中的data-current的值swichNav: function (e) {if (this.data.currentTab === e.target.dataset.current) {return false;} else {this.setData({currentTab: e.target.dataset.current})}},
//控制swiper切换的函数，e.detail.current和currentTab结合，用currentTab控制切换。bindChange: function (e) {this.setData({currentTab: e.detail.current});},
})

5、index.json

在index.json中定义使用的自定义控件，通过自定义控件的方式，可以让下面呈现的页面在单独的页面中定义事件、样式等，这样更加方便。

我这边定义了两个页面，page1和page2，说明放置的位置。方便在index.wxml中引用。

{"usingComponents": {"page1": "../../components/page1/index","page2": "../../components/page2/index"},"navigationBarTitleText": "设备报修"
}

6、自定义组件page1

下图是我将自定义组件page1放置的位置说明。

在自定义组件page1中，需要说明的一点是json文件。在其json文件中，需要声明该页面是组件。

{"component": true,"usingComponents": {}
}

在自定义组件page1中，js文件不再是Page({})，而是Component({})。如果想要了解更多的自定义组件，可以查找微信小程序官网说明：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

自定义组件page2与page1是相似的，如果想要呈现更多页面，也可以定义更多的自定义组件。

7、结束语

在本篇博客中，主要介绍了在微信小程序页面中如何实现tab切换效果，主要是通过swiper进行实现，下面页面的呈现主要是通过自定义组件进行呈现，希望这篇博客能对你有所帮助！

微信小程序tab切换功能的实现相关推荐

navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序 tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接传参的格式为url=&q ...
微信小程序 tab切换展示不同的内容
index.wxml <view class='shopDetail-box'><view class="tab-left" ><view class ...
微信小程序tab切换
一:获取数据,初始化存储切换下标的变量以及数据二:点击切换高亮同时设置子数据 1.定义变量 data: {list:[],//总数据tabIndex:0,//tab切换利用的下标childrenLi ...
微信小程序tab切换（点击标题切换，滑动屏幕切换）
效果图: WXML文件 <view class="tab"><scroll-view class="nav" scroll-x="t ...
微信小程序——tab切换内容
wxml: wxss: js: .wxml代码: <view class="body"> <view class="nav bc_white&quo ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...

微信小程序tab切换功能的实现