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

显示


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容