当前位置:   article > 正文

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

uview tabs组件使用

实现效果(红框内):
在这里插入图片描述

后端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[c_n],
                'value': get_task_states_num(i, user, False)
            }
        }
        data.append(item)
        c_n += 1
    return reg_func(200, data, '查询成功')

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

输出结果:

{
  "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"
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

这段代码定义了一个 Flask 路由,处理用户任务状态的获取。下面是对这段代码的详细解释:

路由定义和装饰器

@task_api.route('/user/task/states_list', methods=['POST', 'GET'])
@visitor_token_required
def task_states(user):
  • 1
  • 2
  • 3
  • @task_api.route('/user/task/states_list', methods=['POST', 'GET']):这是一个路由装饰器,用来定义访问该函数的 URL 和方法。在这里,定义了一个访问路径 /user/task/states_list,支持 POSTGET 两种请求方法。
  • @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
  • 1
  • 2
  • 3
  • 4
  • 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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 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, '查询成功')
  • 1
  • 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>
  • 1
  • 2

这段代码是一个 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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
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 处理标签点击后的逻辑
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

点击标签时,这个方法会接收一个参数,通常是被点击标签的索引或相关信息。

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协助完成

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/719697
推荐阅读
相关标签
  

闽ICP备14008679号