微信小程序实现页面内导航栏功能

gitbbs

WXML代码：

1. <view class="appear-container">
   
2.   <!-- 搜索框 -->
   
3.   <view class="search">
   
4.     <view class="search-box">
   
5.       <image class="search-icon" src="./img/search.png" mode="" />
   
6.       <input class="search-text" type="text" placeholder="请输入诉求名称" />
   
7.     </view>
   
8.   </view>
   
9.   <!-- /搜索框 -->
   
10.   <!-- 导航栏 -->
    
11.   <view class="nav">
    
12.     <view wx:for="{{navList}}" class="nav-item {{item.index==chosed?'nav-active':''}}" data-index="{{item.index}}" bindtap="navChange">
    
13.       {{item.title}}
    
14.     </view>
    
15.   </view>
    
16.   <!-- /导航栏 -->
    
17.   <!-- 内容主体 -->
    
18.   <view class="content">
    
19.     <!-- 遍历数据，同时根据所选导航栏item展示数据源 -->
    
20.     <view wx:for="{{chosed==0?contentList:(chosed==1?contentList1:contentList2)}}" class="content-box">
    
21.       <view class="box-title">
    
22.         {{item.title}}
    
23.       </view>
    
24.       <view class="box-date">
    
25.         {{item.time}}
    
26.       </view>
    
27.       <view class="content-status {{item.status==0?'content-status-blue':'content-status-green'}} ">
    
28.         {{item.status==0?'处理中':'已完成'}}
    
29.       </view>
    
30.     </view>
    
31.   </view>
    
32.   <!-- /内容主体 -->
    
33. </view>

复制代码

WXSS代码：

1. .appear-container {
   
2.   display: flex;
   
3.   flex-direction: column;
   
4.   justify-items: flex-start;
   
5.   height: 100vh;
   
6. }
   
7. /* 搜索框 */
   
8. .search {
   
9.   padding: 5px 20px;
   
10. }
    
11. 
    
12. .search-box {
    
13.   display: flex;
    
14.   justify-content: flex-start;
    
15.   align-items: center;
    
16.   height: 32px;
    
17.   padding: 0 13px;
    
18.   border-radius: 16px;
    
19.   background-color: #F5F6F7;
    
20. }
    
21. 
    
22. .search-icon {
    
23.   height: 16px;
    
24.   width: 16px;
    
25.   margin-right: 10px;
    
26. }
    
27. /* 导航栏 */
    
28. .nav {
    
29.   display: flex;
    
30.   justify-content: space-evenly;
    
31.   height: 44px;
    
32.   line-height: 44px;
    
33. }
    
34. 
    
35. .nav-item {
    
36.   height: 98%;
    
37.   font-weight: 400;
    
38.   font-size: 16px;
    
39.   color: #8A8F99;
    
40. }
    
41. 
    
42. .nav-active {
    
43.   color: #000000;
    
44.   font-weight: 600;
    
45.   border-bottom: 2px solid #549BF0;
    
46. }
    
47. /* 内容主体 */
    
48. .content {
    
49.   flex: 1;
    
50.   padding: 0 20px;
    
51.   background-color: #E9EBEF;
    
52. }
    
53. 
    
54. .content-box {
    
55.   position: relative;
    
56.   margin-top: 20px;
    
57.   padding: 0 16px;
    
58.   overflow: hidden;
    
59.   background-color: #fff;
    
60. }
    
61. 
    
62. .box-title {
    
63.   padding: 12px 0;
    
64.   color: #2E3033;
    
65.   font-weight: 520;
    
66.   font-size: 16px;
    
67.   word-break: break-all;
    
68.   border-bottom: 1px solid #DDE0E4;
    
69. }
    
70. 
    
71. .box-date {
    
72.   padding: 12px 0;
    
73.   color: #6A707B;
    
74.   font-weight: 400;
    
75.   font-size: 14px;
    
76.   word-break: break-all;
    
77. }
    
78. 
    
79. .content-status {
    
80.   position: absolute;
    
81.   top: 7px;
    
82.   right: -20px;
    
83.   height: 20px;
    
84.   width: 72px;
    
85.   font-weight: 400;
    
86.   font-size: 12px;
    
87.   line-height: 20px;
    
88.   text-align: center;
    
89.   transform: rotate(45deg);
    
90. }
    
91. /* 处理中 */
    
92. .content-status-blue{
    
93.   color: #549BF0;
    
94.   background-color: #EEF6FF;
    
95. }
    
96. /* 已完成 */
    
97. .content-status-green{
    
98.   color: #1BBD8C;
    
99.   background-color:#E9FCF6
    
100. }

复制代码

WXJS代码：

1. Page({
   
2.   /**
   
3.    * 页面的初始数据
   
4.    */
   
5.   data: {
   
6.     //标签列表
   
7.     navList: [
   
8.       { title: '全部', index: 0 },
   
9.       { title: '处理中', index: 1 },
   
10.       { title: '已完成', index: 2 },
    
11.     ],
    
12.     // 被选中的下标
    
13.     chosed: 0,
    
14.     // 内容主体数据
    
15.     contentList: [
    
16.       {
    
17.         title: '穿越到古代',
    
18.         time: '2022-08-28 15:37',
    
19.         status: 1
    
20.       },
    
21.       {
    
22.         title: '当伪装太监',
    
23.         time: '2022-07-18 15:37',
    
24.         status: 1
    
25.       },
    
26.       {
    
27.         title: '攻略皇帝的嫔妃',
    
28.         time: '2022-09-38 15:37',
    
29.         status: 0
    
30.       }
    
31.     ],
    
32.     contentList1: [{}],
    
33.     contentList2: [{}],
    
34.   },
    
35. 
    
36.   //监听事件
    
37.   //导航栏切换事件
    
38.   navChange(e: any) {
    
39.     //todo:切换样式  更改index,以便切换主体内容
    
40.     //通过更给chosed来更改样式和数据源
    
41.     let index = e.currentTarget.dataset.index;
    
42.     this.setData({
    
43.       chosed: index,
    
44.     })
    
45.   },
    
46. 
    
47.   onLoad() {
    
48.     //将拿到的数据进行处理，分类
    
49.     var contentList01 = this.data.contentList.filter(currentValue => { return currentValue.status == 0 })
    
50.     var contentList02 = this.data.contentList.filter(currentValue => { return currentValue.status == 1 })
    
51.     this.setData({
    
52.       contentList1: contentList01,
    
53.       contentList2: contentList02,
    
54.     })
    
55.   }
    
56. 
    
57. })

复制代码