[小程序]支付宝小程序GET请求数据并展示列表界面

  • A+
所属分类:Web前端
摘要

最普通的一个应用就是获取网络的列表数据,然后把数据循环渲染到list列表组件上

最普通的一个应用就是获取网络的列表数据,然后把数据循环渲染到list列表组件上

js部分的代码是,获取网络并设置data

Page({   data: {     baseUrl:"https://gofly.sopans.com",     visitors:[]   },   login(){     my.alert({ title: 'You click reset' });   },   onLoad(){     let _this=this;     var baseUrl=this.data.baseUrl;     my.request({       url: baseUrl+'/visitors_online',       method: 'GET',       success: function(res) {       },       fail: function(res) {         my.alert({content: 'fail'});       },       complete: function(res) {         my.hideLoading();         _this.setData({           visitors: res.data.result.ws,         });       }   });   } });

axml部分的代码是,循环渲染带缩略图的模板

  <list>     <list-item a:for="{{visitors}}" thumb="{{baseUrl+item.avator}}"     onClick="onItemClick"     upperSubtitle="新访客" >     {{item.name}}   </list-item>   </list>

展示效果

[小程序]支付宝小程序GET请求数据并展示列表界面