需求:
1,页面上显示指定栏目下的子栏目列表
2,每个子栏目下再显示几条最新文章列表
要解决这个问题,首先要想好API接口怎么写,最简单当然是一个接口搞定:在接口中把1,2的数据都循环出来。
还有一个周折的办法,就是写两个接口,一个接口读取子栏目列表,一个接口读取栏目下的最新文章列表。
下面是用两个接口制作百度小程序列表的方案:
index.js代码:
var idArr = []
Page({
data: {
sortlist: [],
artlist: []
},
fetchData: function () {
swan.request({
url: "https://xxx.com/class_list.php?id=3",
success: res => {
for (var i in res.data) {
idArr.push(res.data[i].id)
}
this.setData({
sortlist: res.data
})
setTimeout(() => {
for (var n in idArr) {
this.dcm(idArr[n],n)
}
}, 500)
}
})
},
dcm: function (id,n) {
swan.request({
url: "https://xxx.com/article_list.php",
data: { id: id },
success: res => {
for (var i in this.data.sortlist) {
if(i == n)
this.data.sortlist[i].artList = res.data
}
this.setData({
sortlist: this.data.sortlist
})
}
})
},
onLoad: function () {
this.setData({
hidden: false
})
this.fetchData();
},
globalData: 'SWAN'
});
index.swan代码:
<block s-for="sortlist">
<navigator url='/pages/list/index?id={{item.classid}}'>
<view><text>{{item.classname}}</text></view>
</navigator>
<block s-for="items in item.artList">
<navigator url='/pages/article/index?id={{items.id}}'>
<view><text>{{items.title}}</text></view>
</navigator>
</block>
</block>