小程序根据返回值的int类型渲染不同的状态

简介: 小程序根据返回值的int类型渲染不同的状态

需求:返回值里面有

0,1,2,3,4 分别代表面试,开会,拜访顾客,项目实施,其他这5中类型,需要将获取到的0,1,2,3,4渲染到页面上,分别显示所对应的类型状态面试,开会,拜访顾客,项目实施,其他。

json数据

将准备的json数据放在服务器上,可以方便调用

如果没有 自己的服务器,就准备掉后端的接口,或者直接存在本地的json文件里面,备用。

{
    "msg": "查询成功",
    "total": 25,
    "code": 1,
    "rows": [{
        "visitCause": 0
    }, {
        "visitCause": 1
    }, {
        "visitCause": 2
    }, {
        "visitCause": 3
    }, {
        "visitCause": 4
    }, {
        "visitCause": 2
    }, {
        "visitCause": 4
    }]
}

js

Page({
    data: {
        list: [],
    },
    onLoad: function(options) {
        wx.request({
            url: "http://xxx.com/test.json",
            data: {             
            },
            method: 'GET',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                this.setData({
                    //第一个data为固定用法,第二个data是json中的data
                    //list: res.data.rows
                    list: (res.data.rows || []).map(a => {
                        a.visitCause = a.visitCause === 0 ? '面试' : a.visitCause === 1 ? '开会' : a.visitCause === 2 ? '拜访顾客' : a.visitCause ===
                            3 ? '项目实施' : '其他'
                        return a
                    })
                })
            }
        })
    },
})

wxml

<!-- 所有列表 -->
            <view class="cu-item" wx:for="{{list}}" wx:key="index" catchtap="bindViewDetails" data-id="{{item.id}}">
                     <span>来访理由:{{item.visitCause}}</span> 
            </view>

显示

相关文章
|
6月前
|
数据采集 分布式计算 数据处理
Dataphin常见问题之与指定类型int不兼容如何解决
Dataphin是阿里云提供的一站式数据处理服务,旨在帮助企业构建一体化的智能数据处理平台。Dataphin整合了数据建模、数据处理、数据开发、数据服务等多个功能,支持企业更高效地进行数据治理和分析。
|
6月前
|
SQL 流计算 OceanBase
OceanBase CDC从热OB库采集过来的Tinyint(1)类型会默认转换成Boolean,请教一下,如果想转换成int类型,有什方法么?
【2月更文挑战第25天】OceanBase CDC从热OB库采集过来的Tinyint(1)类型会默认转换成Boolean,请教一下,如果想转换成int类型,有什方法么?
173 3
|
6月前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6
|
1月前
|
Python
[oeasy]python036_数据类型有什么用_type_类型_int_str_查看帮助
本文回顾了Python中`ord()`和`chr()`函数的使用方法,强调了这两个函数互为逆运算:`ord()`通过字符找到对应的序号,`chr()`则通过序号找到对应的字符。文章详细解释了函数参数类型的重要性,即`ord()`需要字符串类型参数,而`chr()`需要整数类型参数。若参数类型错误,则会引发`TypeError`。此外,还介绍了如何使用`type()`函数查询参数类型,并通过示例展示了如何正确使用`ord()`和`chr()`进行转换。最后,强调了在函数调用时正确传递参数类型的重要性。
21 3
|
2月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
2月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
3月前
|
Java
【Java基础面试五】、 int类型的数据范围是多少?
这篇文章回答了Java中`int`类型数据的范围是-2^31到2^31-1,并提供了其他基本数据类型的内存占用和数值范围信息。
【Java基础面试五】、 int类型的数据范围是多少?
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
63 4
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第1天】小程序的前端 display 有什么类型?
49 2