python后端结合uniapp与uview组件tabs，实现自定义导航按钮与小标签颜色控
实现效果（红框内）：https://img-blog.csdnimg.cn/direct/05546288d949414baaa9f35acf6e6ee4.png
后端api如下：
@task_api.route('/user/task/states_list', methods=['POST', 'GET'])
@visitor_token_required
def task_states(user):
name_list = ['待接单', '设计中', '交付中', '已完成', '全部']
data = []
color = ['#F04864', '#F04864', '#F04864', '#19be6b', '#19be6b']
c_n = 0
for i in name_list:
item = {
'name': i,
'badge': {
'color': '#fff',
'bgColor': color,
'value': get_task_states_num(i, user, False)
}
}
data.append(item)
c_n += 1
return reg_func(200, data, '查询成功')
输出效果：
{
"code": 200,
"data": [
{
"badge": {
"bgColor": "#F04864",
"color": "#fff",
"value": 0
},
"name": "待接单"
},
{
"badge": {
"bgColor": "#F04864",
"color": "#fff",
"value": 2
},
"name": "设计中"
},
{
"badge": {
"bgColor": "#F04864",
"color": "#fff",
"value": 11
},
"name": "交付中"
},
{
"badge": {
"bgColor": "#19be6b",
"color": "#fff",
"value": 22
},
"name": "已完成"
},
{
"badge": {
"bgColor": "#19be6b",
"color": "#fff",
"value": 38
},
"name": "全部"
}
],
"msg": "查询成功",
"time": "2024-06-09 15:07:47"
}
这段代码定义了一个 Flask 路由，处理用户使命状态的获取。下面是对这段代码的详细解释：
路由定义和装饰器
@task_api.route('/user/task/states_list', methods=['POST', 'GET'])
@visitor_token_required
def task_states(user):
[*]@task_api.route('/user/task/states_list', methods=['POST', 'GET'])：这是一个路由装饰器，用来定义访问该函数的 URL 和方法。在这里，定义了一个访问路径 /user/task/states_list，支持 POST 和 GET 两种请求方法。
[*]@visitor_token_required：这是一个自定义的装饰器，用来验证访问该路由的用户是否拥有正当的访问权限。通常，这个装饰器会查抄用户的令牌(token)，确保用户是颠末认证的。
[*]def task_states(user)：定义了一个名为 task_states 的函数，并且 user 是一个参数。user 参数一般是从 @visitor_token_required 装饰器中获取到的颠末验证的用户信息。
函数内部逻辑
name_list = ['待接单', '设计中', '交付中', '已完成', '全部']
data = []
color = ['#F04864', '#F04864', '#F04864', '#19be6b', '#19be6b']
c_n = 0
[*]name_list：这是一个使命状态的列表，包罗了可能的使命状态名称，如“待接单”、“筹划中”、“交付中”、“已完成”和“全部”。
[*]data：这是一个空列表，稍后将用来存储每个使命状态对应的数据信息。
[*]color：这是一个颜色代码列表，每个使命状态对应一个配景颜色，用于标识使命状态的颜色。
[*]c_n：这是一个计数器变量，用来遍历 color 列表的索引。
遍历状态列表并天生数据
for i in name_list:
item = {
'name': i,
'badge': {
'color': '#fff',
'bgColor': color,
'value': get_task_states_num(i, user, False)
}
}
data.append(item)
c_n += 1
[*]for i in name_list：遍历 name_list 列表中的每一个状态名称。
[*]item：定义一个字典，存储当前使命状态的详细信息，包罗状态名称 name 和一个徽章 badge。
[*]name：使命状态名称。
[*]badge：一个包罗颜色和数值信息的字典。
[*]color：徽章上的文本颜色，这里固定为白色 #fff。
[*]bgColor：徽章的配景颜色，从 color 列表中按顺序获取。
[*]value：调用 get_task_states_num 函数获取对应使命状态的数量，这个函数可能会查询数据库或其他数据源来获取 user 用户对应状态 i 的使命数量。
[*]data.append(item)：将构造好的 item 添加到 data 列表中。
[*]c_n += 1：计数器 c_n 加 1，用于下一个使命状态的颜色获取。
返回效果
return reg_func(200, data, '查询成功')
[*]reg_func：这是一个自定义函数，用来格式化 API 的返回效果。
[*]200：体现 HTTP 状态码 200，通常体现请求成功。
[*]data：传入的使命状态列表数据。
[*]'查询成功'：消息，体现查询操纵成功。
主要逻辑总结
[*]验证用户身份。
[*]天生一个使命状态列表，每个状态包罗状态名称、颜色和对应使命数量。
[*]返回天生的使命状态列表数据。
代码的主要目的
这个路由用于返回用户使命的差别状态及其对应的使命数量，并为每个状态设置特定的颜色，便于前端展示。
uniapp代码如下：
<u-tabs :list="states_list" lineWidth="50" @click="click_tabs" :scrollable="false"
itemStyle="padding:20rpx 2rpx;"></u-tabs>
这段代码是一个 Vue.js 模板中的组件调用，具体利用了一个自定义的 <u-tabs> 组件来显示标签页。下面是对这段代码的详细解释：
组件 <u-tabs>
<u-tabs> 组件是一个标签页组件，通常用于在单个页面上显示多个标签，以实现内容的切换。这个组件有几个属性和变乱，用于配置和处理标签的活动。
属性解释
<u-tabs
:list="states_list"
lineWidth="50"
@click="click_tabs"
:scrollable="false"
itemStyle="padding:20rpx 2rpx;">
</u-tabs>
1. :list="states_list"
[*]:list：这是一个绑定属性，通常用于将数据传递给子组件。在 Vue 中，前缀 : 体现属性值是一个 JavaScript 表达式。
[*]states_list：这是一个 Vue 实例中的数据属性，它包罗了用于天生标签的数据列表。比方，states_list 可能是一个对象数组，每个对象体现一个标签。
每个对象可以包罗标签名称和对应的值或其他属性，具体内容取决于 u-tabs 组件的实现。
2. lineWidth="50"
[*]lineWidth：这是一个定义标签下方线条宽度的属性，单位一般是像素 (px)。
[*]50：设置线条宽度为 50 像素。
3. @click="click_tabs"
[*]@click：这是一个变乱绑定，体现当用户点击某个标签时，会触发 click_tabs 方法。
[*]click_tabs：这是 Vue 实例中的一个方法，用于处理点击变乱。
methods: {
click_tabs(tabIndex) {
console.log("标签点击事件，标签索引:", tabIndex);
// 根据 tabIndex 处理标签点击后的逻辑
}
}
点击标签时，这个方法会吸取一个参数，通常是被点击标签的索引或相关信息。
4. :scrollable="false"
[*]:scrollable：这是一个布尔属性，控制标签是否可以滚动。在 Vue 中，前缀 : 体现属性值是一个 JavaScript 表达式。
[*]false：设置标签不可滚动，即标签不会超出容器的宽度。
5. itemStyle="padding:20rpx 2rpx"
[*]itemStyle：这是一个内联样式属性，直接应用于每个标签项。
[*]"padding:20rpx 2rpx"：定义了每个标签的内边距，20rpx 体现上下内边距为 20 像素，2rpx 体现左右内边距为 2 像素。rpx 是一种响应式像素单位，常用于小程序开发中，可以根据屏幕宽度自顺应调解。
组件的功能
[*]显示 states_list 中定义的标签，每个标签可以是一个差别的使命状态。
[*]标签的下方线条宽度为 50 像素。
[*]用户点击标签时，触发 click_tabs 方法进行处理。
[*]标签项不可滚动，标签内容宽度受限于容器宽度。
[*]每个标签项有固定的内边距，控制标签的显示样式。
应用场景
这种组件通常用于用户界面中的导航或内容切换，比方在一个使命管理系统中，用于切换显示差别状态的使命列表。
代码解释由chatGPT协助完成
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]