10.2.5 最新资讯
本小节讲解最新资讯信息的获取和循环显示，效果如图10-6。
开发分析
第1步：查看和测试接口的内容。
第2步：在程序的data代码块初始化变量zixun，用于存放资讯数据。
第3步：在程序的methods代码块中自定义方法GetZixun，用于获取接口的资讯数据。
第4步：在程序的mounted代码块中调用方法GetZixun，获取数据。
第5步：改造布局代码，将获取的资讯数组信息循环显示出来。
第1步：查看和测试接口
地址
返回值类型
对象数组，每一个数组的元素是一个对象，每个对象代表一个资讯的信息。返回值
[
{
"id" : 26,
"title" : "dddddddddddd"
},
{
"id" : 25,
"title" : "cccccccccccccccc"
},
{
"id" : 24,
"title" : "bbbbbbbbbbbbbbbbb"
}
]第2,3,4步：获取数据
<script>
export default {
data() {
return {
zixun:[] //初始化为空，数组，存放最新资讯数据
}
},
onLoad() {
},
mounted:function(){
this.GetZixun(); //调用获取最新资讯的方法
},
methods: {
//自定义方法：获取最新资讯
GetZixun:function(){
//调用uni-app的api获取远程服务器数据
uni.request({
//url:this.$WebURL.WebUrl.dizhi + "/m/wx_api_news_list_top3.asp",
//http://qiyephp.yaoyiwangluo.com/h5/wx_api_News_top3.php
url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_News_top3.php",
//success:function(res) 不能获取
success:(res) =>{
this.zixun = res.data;//返回值赋值给变量
//console.log("返回产品数据："+this.chanpin)
}
})
},//获取最新资讯 结束
}
}
</script>第5步：显示数据
<!--通过接口获取最新资讯数据，然后循环显示-->
<!--变量zixun，存放的是通过接口获取的最新资讯数据（数组）-->
<!--url属性里面的内容是要跳转的资讯详细页面+参数-->
<!--参数zixun_id：资讯id，参数zixun_mc：资讯名称-->
<navigator class='zixun' v-for="zx in zixun" :key="zx.id"
:url="'/pages/d/zixun_info/zixun_info?zixun_id='+zx.id+'&zixun_mc='+zx.title" >
<text class='zixun_biaoti'>{{zx.title}}</text>
<image src='/static/tupian/right.png' class='zixun_tubiao'></image>
</navigator>
