描述

项目要写一个页面内的导航栏，功能包括点击更改导航栏的样式，切换数据源。

成果

介绍

首先对导航栏设置flex布局，让三个导航标签评分屏幕，之后设置点击事件，样式改变和数据切换

代码

wxml

<view class="appear-container"><!-- 搜索框 --><view class="search"><view class="search-box"><image class="search-icon" src="./img/search.png" mode="" /><input class="search-text" type="text" placeholder="请输入诉求名称" /></view></view><!-- /搜索框 --><!-- 导航栏 --><view class="nav"><view wx:for="{{navList}}" class="nav-item {{item.index==chosed?'nav-active':''}}" data-index="{{item.index}}" bindtap="navChange">{{item.title}}</view></view><!-- /导航栏 --><!-- 内容主体 --><view class="content"><!-- 遍历数据，同时根据所选导航栏item展示数据源 --><view wx:for="{{chosed==0?contentList:(chosed==1?contentList1:contentList2)}}" class="content-box"><view class="box-title">{{item.title}}</view><view class="box-date">{{item.time}}</view><view class="content-status {{item.status==0?'content-status-blue':'content-status-green'}} ">{{item.status==0?'处理中':'已完成'}}</view></view></view><!-- /内容主体 -->
</view>

wxss

.appear-container {display: flex;flex-direction: column;justify-items: flex-start;height: 100vh;
}
/* 搜索框 */
.search {padding: 5px 20px;
}.search-box {display: flex;justify-content: flex-start;align-items: center;height: 32px;padding: 0 13px;border-radius: 16px;background-color: #F5F6F7;
}.search-icon {height: 16px;width: 16px;margin-right: 10px;
}
/* 导航栏 */
.nav {display: flex;justify-content: space-evenly;height: 44px;line-height: 44px;
}.nav-item {height: 98%;font-weight: 400;font-size: 16px;color: #8A8F99;
}.nav-active {color: #000000;font-weight: 600;border-bottom: 2px solid #549BF0;
}
/* 内容主体 */
.content {flex: 1;padding: 0 20px;background-color: #E9EBEF;
}.content-box {position: relative;margin-top: 20px;padding: 0 16px;overflow: hidden;background-color: #fff;
}.box-title {padding: 12px 0;color: #2E3033;font-weight: 520;font-size: 16px;word-break: break-all;border-bottom: 1px solid #DDE0E4;
}.box-date {padding: 12px 0;color: #6A707B;font-weight: 400;font-size: 14px;word-break: break-all;
}.content-status {position: absolute;top: 7px;right: -20px;height: 20px;width: 72px;font-weight: 400;font-size: 12px;line-height: 20px;text-align: center;transform: rotate(45deg);
}
/* 处理中 */
.content-status-blue{color: #549BF0;background-color: #EEF6FF;
}
/* 已完成 */
.content-status-green{color: #1BBD8C;background-color:#E9FCF6
}

ts

Page({/*** 页面的初始数据*/data: {//标签列表navList: [{ title: '全部', index: 0 },{ title: '处理中', index: 1 },{ title: '已完成', index: 2 },],// 被选中的下标chosed: 0,// 内容主体数据contentList: [{title: '穿越到古代',time: '2022-08-28 15:37',status: 1},{title: '当伪装太监',time: '2022-07-18 15:37',status: 1},{title: '攻略皇帝的嫔妃',time: '2022-09-38 15:37',status: 0}],contentList1: [{}],contentList2: [{}],},//监听事件//导航栏切换事件navChange(e: any) {//todo:切换样式  更改index,以便切换主体内容//通过更给chosed来更改样式和数据源let index = e.currentTarget.dataset.index;this.setData({chosed: index,})},onLoad() {//将拿到的数据进行处理，分类var contentList01 = this.data.contentList.filter(currentValue => { return currentValue.status == 0 })var contentList02 = this.data.contentList.filter(currentValue => { return currentValue.status == 1 })this.setData({contentList1: contentList01,contentList2: contentList02,})}})

总结

通过切换chosed来切换样式和数据源，

继续努力