最普通的一个应用就是获取网络的列表数据,然后把数据循环渲染到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>
展示效果