微信小程序实现tab点击切换

本文实例为大家分享了微信小程序无滑动效果的tab点击切换的具体代码，供大家参考，具体内容如下

1. <!--pages/dingdan/dingdan.wxml-->
2. <view class="body">
3. <view class="swiper-tab">
4.   <view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})
5.    <hr class="{{page==index?'selected-line':'unselect-line'}}" />
6.   </view>
7. </view>
9. <view class="view-Content">
10.   <view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}">
11.    <view class="content">
12.     <text>暂无订单{{index}}</text>
13.    </view>
14.   </view>
15. </view>
17. </view>

复制代码

1. /* pages/dingdan/dingdan.wxss */
2. page {
3. width: 100%;
4. height: 100%;
5. overflow: hidden;
6. /* background: pink; */
7. }
9. .body {
10. height: 100%;
11. /* background: hotpink; */
12. display: flex;
13. flex-direction: column;
14. }
16. /* tab栏 */
17. .swiper-tab {
18. width: 100%;
19. height: 80rpx;
20. text-align: center;
21. display: flex;
22. justify-content: space-between;
23. background: white;
24. }
26. .selected-menu {
27. display: flex;
28. flex-direction: column;
29. align-items: center;
30. color: #ff5050;
31. background: #fff;
32. font-size: 32rpx;
33. font-weight: bold;
34. font-family: ingFang SC;
35. font-weight: 400;
36. width: 33%;
37. height: 60rpx;
38. line-height: 60rpx;
39. opacity: 1;
40. /* border-bottom: 2px solid #ff5050; */
41. position: relative;
42. }
44. .unselect-menu {
45. display: flex;
46. flex-direction: column;
47. align-items: center;
48. font-size: 16px;
49. font-family: PingFang SC;
50. font-weight: 400;
51. color: #4f4f50;
52. width: 33%;
53. height: 60rpx;
54. line-height: 60rpx;
55. background: #fff;
56. opacity: 1;
57. position: relative;
58. /* border-radius: 34rpx; */
59. }
61. .selected-line {
62. background: #ff5050;
63. height: 4rpx;
64. width: 90rpx;
65. position: absolute;
66. /* margin-top: 10rpx; */
67. bottom: -18rpx;
68. width: 60rpx;
69. }
71. /* 内容 */
72. .view-Content {
73. flex: 1;
74. overflow-y: auto;
75. background-color: rgb(236, 236, 236);
76. }
78. .tabCon {
79. height: 100%;
80. }
82. /* 展示隐藏 */
83. .show {
84. display: block;
85. }
87. .hidden {
88. display: none;
89. }

复制代码

1. Page({
3. /**
4. * 页面的初始数据
5. */
6. data: {
7.   page: 0, // page：当前页--
8.   tabList: [{
9.    title: '菜单1',
10.    num: 0
11.   }, {
12.    title: '菜单2',
13.    num: 0
14.   }, {
15.    title: '菜单3',
16.    num: 0
17.   }],
18. },
20. // 切换tab
21. change: function (event) {
22.   console.log('切换时会调用', event);
23.   var a = event.currentTarget.dataset.pageid
24.   this.setData({
25.    page: a,
26.   })
27. },
29. /**
30. * 生命周期函数--监听页面加载
31. */
32. onLoad: function (options) {
34. },
36. /**
37. * 生命周期函数--监听页面初次渲染完成
38. */
39. onReady: function () {
41. },
43. /**
44. * 生命周期函数--监听页面显示
45. */
46. onShow: function () {
48. },
50. /**
51. * 生命周期函数--监听页面隐藏
52. */
53. onHide: function () {
55. },
57. /**
58. * 生命周期函数--监听页面卸载
59. */
60. onUnload: function () {
62. },
64. /**
65. * 页面相关事件处理函数--监听用户下拉动作
66. */
67. onPullDownRefresh: function () {
69. },
71. /**
72. * 页面上拉触底事件的处理函数
73. */
74. onReachBottom: function () {
76. },
78. /**
79. * 用户点击右上角分享
80. */
81. onShareAppMessage: function () {
83. },
85. })

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。