0
点赞
收藏
分享

微信扫一扫

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

Villagers 2022-02-20 阅读 51


需求:返回值里面有

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

}]
}


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


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>

显示


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


举报

相关推荐

0 条评论