百度小程序开发:显示栏目列表,再读取每个栏目的最新几条文章

2021-01-2609:29:32APP与小程序开发Comments1,963 views字数 1065阅读模式

需求:
1,页面上显示指定栏目下的子栏目列表
2,每个子栏目下再显示几条最新文章列表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20886.html

要解决这个问题,首先要想好API接口怎么写,最简单当然是一个接口搞定:在接口中把1,2的数据都循环出来。
还有一个周折的办法,就是写两个接口,一个接口读取子栏目列表,一个接口读取栏目下的最新文章列表。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20886.html

下面是用两个接口制作百度小程序列表的方案:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20886.html

index.js代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20886.html

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代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20886.html

<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>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/20886.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/20886.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定