当前位置：首页 > news >正文

python后端结合uniapp与uview组件tabs，实现自定义导航按钮与小标签颜色控制

news 来源：原创 2024/9/22 9:39:55

实现效果（红框内）：
在这里插入图片描述

后端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 = 0for i in name_list:item = {'name': i,'badge': {'color': '#fff','bgColor': color[c_n],'value': get_task_states_num(i, user, False)}}data.append(item)c_n += 1return 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[c_n],'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 是一种响应式像素单位，常用于小程序开发中，可以根据屏幕宽度自适应调整。