一,请求的json数据使用模板显示到页面中
~~~
.js文件中code
Page({
data: {
newsList:[],
},
loadData: function (){
var that = this
wx.request({
url: 'http://www.yrey.me/do/designers?&pageNo=1&pageSize=20',
data: {},
header: {
'Content-Type': 'application/json'
},
//请求成功的方法
success: function(res) {
console.log(res.data);
if(!res.data){
return false
}
//将请求到的数据设置到data中的newList中
var dataArr = that.data.newsList
var newData = dataArr.concat(res.data);
that.setData({ newsList:newData })
},
//请求失败的方法
fail: function(res){
},
//不管加载成功与失败都会加载方法
complete: function(){
}
})
},
onLoad: function () {
this.loadData();
}
})
~~~
~~~
.wxml 文件中的code
<!--设计师列表模板 begin-->
<template name="itmes">
<navigator url="../designerdetail/designerdetail?id={{odesignerId}}" hover-class="navigator-hover">
<view class="desiitem" hover-class="hitem">
<view class="itemcon">
<image src="{{avatarUrl}}" class="headimg" background-size="cover" model="scaleToFill"></image>
<view class="con">
<view class="dname">{{designerName}}</view>
<view class="city">{{adeptType}}</view>
<view class="citys">{{districtName}}</view>
</view>
</view>
</view>
</navigator>
</template>
<!--设计师列表模板 end-->
<!--循环输出设计师模板列表 begin-->
<view wx:for="{{newsList}}" class="list">
<view wx:for="{{item.designers}}">
<template is="itmes" data="{{...item}}"/>
</view>
</view>
<!--循环输出设计师模板列表 end-->
~~~