uni-app 之 获取网络列表数据

image.png

<template><!-- vue2的<template>里必须要有一个盒子，不能有两个，这里的盒子就是 view--><view>--- uni.request 网络请求API接口 ---<view v-for="(item) in caturl" :key="item.id"><!-- 免费的测试接口 --><image :src="item.url" mode="aspectFill"></image><view>{{item.id}}</view></view></view>
</template><script>export default {data() {return {caturl: [],}},methods: {getpicurl() {uni.showLoading({title: "加载中" // 加个进度条})uni.request({url: "https://api.thecatapi.com/v1/images/search?limit=2",// timeout:"6000",success: res => {console.log(res) // log打印获取的数据this.caturl = res.data// this.catid = res.data.id// uni.hideLoading() // 图片加载出来后，关闭进度条},// fail:err=>{// },complete: () => {// 接口调用结束的回调函数（调用成功、失败都会执行） 接口调用结束的回调函数（调用成功、失败都会执行）    uni.hideLoading() // 无论图片能否加载出来，超时后都关闭进度条},})},},onLoad() {this.getpicurl()}}
</script><style lang="scss">
</style>