专栏首页编程微刊uni-app请求新闻接口api,渲染新闻列表

uni-app请求新闻接口api,渲染新闻列表

在网上找了一个免费的新闻api http://v.juhe.cn/toutiao/index?type=top&key=3dc86b09a2ee2477a5baa80ee70fcdf5

但是一般免费的api,存在不了多久就挂掉了,前面收集的那些免费的api差不多已经挂了一半了,谨慎使用~

<template>
    <view class="page">
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="item in itemList">
                <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
                    <view class="uni-media-list-logo">
                        <image v-if="showImg" :src="item.thumbnail_pic_s"></image>
                    </view>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{item.author_name}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">{{item.title}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                showImg: false,
                itemList: []
            }
        },
        onLoad() {
            this.getList();
            this.showImg = true;

        },
        methods: {
            getList() {
                uni.request({
                    url: '/api/toutiao/index?type=top&key=3dc86b09a2ee2477a5baa80ee70fcdf5',
                    success: (res) => {
                        console.log(res.data);
                        this.itemList = res.data.result.data;
                    }
                });
            }
        }
    }
</script>
<style>
    .title {
        padding: 20upx;
    }
    .uni-navigate-right.uni-media-list {
        height: 80px;
    }
</style>

解决接口跨域问题,若有不会可以查看: uni-app学习笔记-请求接口跨域问题(八) https://www.jianshu.com/p/aea58ee405b8

"devServer": {
                          "proxy": {
                              "/api": {                    
                                  "target":"http://v.juhe.cn",
                                  "changeOrigin": true,//是否跨域
                                  "secure": false,// 设置支持https协议的代理
                                   "pathRewrite":{"^/api":"/"}
                              }
                          }
                },

效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序读取几种不同格式json数据(小程序json解析)

    1:解析这个json:http://www.intmote.com/myproject/test/new_file.json

    王小婷
  • uni-app渲染新闻列表,跳转详情页

    3:开始写list界面代码,主要讲json数据渲染在前端列表,前面有说过,很简单的,然后在通过goDetail的方法带参跳转到详情页。

    王小婷
  • uniapp存放json格式的数据

    在做前端开发的时候,少不了要用一些模拟的json的数据来进行测试,在没有拿到后端开发小伙伴的接口之前,就先尝试着自己写一下json数据吧,前面有说过,使用moc...

    王小婷
  • android-ramdisk.img分析、recovery.img&boot.img执行过程【转】

    ramdisk通过直面意思就大概能理解意思,ram disk虚拟内存盘,将ram模拟成硬盘来使用的文件系统。对于传统的磁盘文件系统来说,这样做的好处是可以极大提...

    233333
  • 信息量,熵,交叉熵,相对熵与代价函数

    如果有⼈告诉我们⼀个相当不可能的事件发⽣了,我们收到的信息要多于我们被告知某个很可能发⽣的事件发⽣时收到的信息。如果我们知道某件事情⼀定会发⽣,那么我们就不会接...

    llhthinker
  • 遍历目录清理COS中大小为0的文件 for JAVA

    在上传到COS文件中,会存在一些0字节的文件,对于部分业务来说是无效的。需要做清理,否则看着碍眼也没用。

    腾讯云技术服务团队
  • 遍历目录清理COS中大小为0的对象 for JAVA

    在上传到COS文件中,会存在一些0字节的文件,对于部分业务来说是无效的。需要做清理。

    孙伟
  • 三星自动驾驶再曝进展,3辆车获加州路测许可

    李根 假装发自 一号公路 量子位 报道 | 公众号 QbitAI ? △ 三星圣何塞办公楼 虽然继承人李在镕面临牢狱之灾,但对于韩国科技巨头三星来说:生活要继...

    量子位
  • uni-app下拉刷新加载刷新数据

    onPullDownRefresh 监听该页面用户下拉刷新事件 需要在 pages.json 里 开启 enablePullDownRefresh

    达达前端
  • java核心数据结构总结

     JDK提供了一组主要的数据结构的实现,如List、Set、Map等常用结构,这些结构都继承自java.util.collection接口。

    Java编程指南

扫码关注云+社区

领取腾讯云代金券