uniapp uni.request请求接口
1、接口
接口地址
2、页面
pages/list/list.vue-列表页面
pages/details/details.vue-详情页面
| API | 功能 |
|---|---|
| uni.navigateTo(OBJECT) | 页面跳转 |
| uni.request(OBJECT) | 发起网络请求 |
pages/list/list.vue
<template><view><view class="out"><view class="row" v-for="item in listArr" :key="item.id" @click="clickItem(item.id)"><view class="title">{{item.title}}</view><view class="content">{{item.body}}</view></view></view></view>
</template><script>export default {data() {return {listArr:[]};},methods:{getData(){uni.request({url:"https://jsonplaceholder.typicode.com/posts",success:res=>{// console.log(res)this.listArr= res.data}})},clickItem(e){console.log(e)uni.navigateTo({url:"/pages/details/details?id="+e//地址拼接})}},onLoad() {this.getData()uni.setNavigationBarTitle({title:"新闻列表"})uni.setNavigationBarColor({backgroundColor:"#007aff",frontColor:"#ffffff"}) }}
</script><style lang="scss">
.out{padding: 50rpx 30rpx;.row{padding: 20rpx 0;border-bottom: 1rpx dotted #e4e4e4;.title{font-size: 36rpx;padding-bottom: 15rpx;color: #333;}.content{font-size: 28rpx;}}
}
</style>pages/details/details.vue
<template><view><view class="detail"><view class="title">{{objData.title}}</view><view class="content">{{objData.body}}</view></view><view class="comments"><view class="text">Comments</view><view class="row" v-for="item in comments" :key="item.id"><view class="top"><view class="name">{{item.name}}</view><view class="mail">{{item.email}}</view></view><view class="body">{{item.body}}</view></view></view></view>
</template><script>export default {data() {return {objData:{},id:1,comments:[]};},onLoad(e){this.id=e.idthis.getDetail()this.getComments()// console.log(this.id)},methods:{getDetail(){uni.showLoading({title:"数据加载中",mask:true})uni.request({url:"https://jsonplaceholder.typicode.com/posts/" + this.id,success:res=>{// console.log(res)this.objData=res.data},complete:()=>{uni.hideLoading()//请求完成隐藏弹窗}})},getComments(){uni.request({url:`https://jsonplaceholder.typicode.com/posts/${this.id}/comments`,//地址拼接，使用``，变量使用${}success:res=>{// console.log(res)this.comments=res.data}})}}}
</script><style lang="scss">
.detail{padding: 30rpx;.title{font-size: 46rpx;color: #000;padding-bottom: 20rpx;}.content{font-size: 30rpx;color: #666;padding-bottom: 60rpx;}
}
.comments{padding: 30rpx;background: #f8f8f8;.text{font-size: 46rpx;margin-bottom: 30rpx;}.row{border-bottom: 1px solid #e8e8e8;padding: 20rpx 0;.top{display: flex;justify-content: space-between;font-size: 22rpx;color: #999;padding-bottom: 15rpx;}.body{font-size: 28rpx;color: #555;}}
}
</style>3、效果图
