1、接口数据格式
image.png
2、zepto.min.js ajax请求
（1）引入zepto.min.js
<script type="text/javascript" src="../../script/zepto.min.js"></script>
（2）ajax请求
<script>
var slide = null;
var vm = new Vue({
el: '#app',
data: {
ads1_list: [],
ads2_list: [],
goods_list: []
},
methods: {
init: function () {
$.ajax({
type:'GET',
url: index_url,
data: {
},
dataType: 'json',
timeout: 300,
async: true, //所有请求均为异步。如果需要发送同步请求
cache: false, //浏览器是否应该被允许缓存GET响应。
context: $('body'),
success: function (ret) {
console.log(JSON.stringify(ret));
},
error: function () {
alert('Ajax error!')
}
})
}
},
});
</script>
3、检测效果
image.png
4、数据渲染
<script>
var slide = null;
var vm = new Vue({
el: '#app',
data: {
ads1_list: [],
ads2_list: [],
goods_list: []
},
//zepto.js ajax请求方法
methods: {
init: function () {
$.ajax({
type:'GET',
url: index_url,
data: {
},
dataType: 'json',
timeout: 300,
async: true, //所有请求均为异步。如果需要发送同步请求
cache: false, //浏览器是否应该被允许缓存GET响应。
context: $('body'),
success: function (ret) {
vm.ads1_list = ret.data.ads1_list;
vm.ads2_list = ret.data.ads2_list;
vm.goods_list = ret.data.goods_list;
console.log(JSON.stringify(vm.ads1_list));
console.log(JSON.stringify(vm.ads2_list));
console.log(JSON.stringify(vm.goods_list));
},
error: function () {
alert('Ajax error!')
}
})
}
},
});
setTimeout(function () {
vm.init();
},500)
</script>
html
<body>
<div id="app">
<div id="aui-slide">
<div class="aui-slide-wrap">
<div class="aui-slide-node bg-dark aui-text-center" v-for="(ads1,index) in ads1_list" tapmode v-on:click="open_goods(ads1.goods_id)">
<img :src="ads1.url" alt="" style="height: 10rem;">
</div>
</div>
<div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<section class="aui-content" id="banner">
<img src="../../image/5836ad3aN45a75063.jpg"/>
</section>
<section class="bg-white aui-content" id="gongge">
<div class="title aui-padded-10">
平台推荐
</div>
<div class="aui-content">
<ul class="aui-grid-nine">
<li class="aui-col-xs-4 aui-text-center" tapmode v-on:click="open_goods(ads2.goods_id)" v-for="(ads2,index) in ads2_list">
<img :src="ads2.url"/>
</li>
</ul>
</div>
</section>
<section class="aui-content bg-white">
<div class="title aui-padded-10 aui-border-b">
商品
</div>
<ul class="aui-list-view">
<transition-group name="list" tag="p">
<li class="aui-list-view-cell aui-img" v-for="(vo,index) in goods_list" tapmode v-on:click="open_goods(vo.id)" v-bind:key="index">
<img class="aui-img-object aui-pull-left" :src="vo.url" v-if="vo.url">
<img class="aui-img-object aui-pull-left" src="../../image/default.png" v-else>
<div class="aui-img-body aui-ellipsis-2">
{{ vo.goods_name }}
</div>
<div class="aui-img-footer">
<span class="aui-text-danger goods-price">
¥<strong>{{ vo.price }}</strong>元
</span>
</div>
</li>
</transition-group>
</ul>
</section>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
</body>
</html>
6、效果显示
image.png
网友评论