小程序根据返回值的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>

显示

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

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等