类似tabBar的切换页面效果（微信小程序）

需求分析

微信小程序开发，经常遇到类似tabBar的页面切换效果：视图中有标题和页面，当点击一个标题时，该标题呈选中状态，页面自动切换；当滑动页面时，标题自动切换。

实现逻辑

这种效果的实现逻辑是：定义变量selectedTitle、标题的id，当id和selectedTitle相等时，定义样式title-selected。当点击一个标题时，将该标题的id赋值给selectedTitle，该标题获得样式title-selected，呈现选中状态。页面使用swiper组件，将current属性与selectedTitle绑定，可以实现页面自动切换。将current赋值给selectedTitle，当滑动页面时，标题将自动切换。

项目源码

页面切换-横向的代码如下。

1、JS文件

1. data: {
2. // 定义标题的数组
3. titles: ["Yellow", "Orange", "Green", "Blue", "Purple"],
4. // 定义选中标题的初始值0
5. selectedTitle: "0",
6. },
7. // 定义点击标题的事件处理函数，将选中标题的id赋值给selectedTitle
8. bindtap: function (e) {
9. console.log(e)
10. this.setData({
11. selectedTitle: e.currentTarget.id
12. });
13. },
14. //定义滑块改变的事件处理函数，将current赋值给selectedTitle
15. bindChange: function (e) {
16. this.setData({
17. selectedTitle: e.detail.current
18. })
19. },
20. onReady: function () {
21. // 页面渲染完成
22. var that = this;
23. wx.getSystemInfo({
24. success: function (res) {
25. that.setData({
26. swiperHeight: (res.windowHeight - 37)
27. });
28. }
29. })
30. }

2、WXML文件

1. <view class="titles">
2. <!--绑定事件处理函数bindtap-->
3. <!--给选中的组件，即数组当前项的下标与selectedTitle相等的组件，定义样式名titles-selected-->
4. <block wx:for="{{titles}}">
5. <view id="{{index}}" bindtap="bindtap" class="title {{index==selectedTitle ? 'title-selected' : ''}}">
6. {{item}}
7. </view>
8. </block>
9. </view>
10. <!--绑定事件处理函数bindchange-->
11. <swiper bindchange="bindChange" current='{{selectedTitle}}' style="height:{{swiperHeight}}px">
12. <block wx:for="{{titles}}">
13. <swiper-item>
14. <!--设置5个样式名-->
15. <view class='page bc_{{item}}'>{{item}}</view>
16. </swiper-item>
17. </block>
18. </swiper>

3、WXSS文件

1. .titles {
2. height: 36px;
3. width: 750rpx;
4. background-color: lightgray;
5. display: flex;
6. justify-content: space-around;
7. }
8.  
9. .title {
10. width: 180rpx;
11. display: flex;
12. align-items: center;
13. justify-content: center;
14. }
15.  
16. .title-selected {
17. border-bottom: 2px solid red;
18. color: red;
19. }
20.  
21. .page {
22. width: 100%;
23. height: 100%;
24. display: flex;
25. align-items: center;
26. justify-content: center;
27. font-size: 90rpx;
28. color: white;
29. }
30.  
31. .bc_Yellow {
32. background-color: yellow;
33. }
34.  
35. .bc_Orange {
36. background-color: orange;
37. }
38.  
39. .bc_Green {
40. background-color: green;
41. }
42.  
43. .bc_Blue {
44. background-color: blue;
45. }
46.  
47. .bc_Purple {
48. background-color: purple;
49. }