但是一般免费的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学习笔记-请求接口跨域问题（八）
"devServer": { "proxy": { "/api": { "target":"http://v.juhe.cn", "changeOrigin": true,//是否跨域 "secure": false,// 设置支持https协议的代理 "pathRewrite":{"^/api":"/"} } } },
效果
