131 lines
3.3 KiB
HTML
131 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css"/>
|
|
<style>
|
|
h2,body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.content {
|
|
margin-top: 46px;
|
|
margin-bottom: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
|
|
<van-nav-bar
|
|
fixed
|
|
title="标题"
|
|
left-text="返回"
|
|
right-text="按钮"
|
|
left-arrow
|
|
@click-left="onClickLeft"
|
|
@click-right="onClickRight">
|
|
|
|
</van-nav-bar>
|
|
|
|
<div class="content">
|
|
<van-tabs v-model="tabsActive" @click="changeTabs" swipeable animated>
|
|
<van-tab :title="item.title" v-for="(item,index) in Tabs" :key="index">
|
|
|
|
<van-card
|
|
v-for="(it,ix) in item.content" :key="ix"
|
|
num="2"
|
|
currency=""
|
|
:price="it.category"
|
|
:desc="it.author_name"
|
|
:title="it.title"
|
|
:thumb="it.thumbnail_pic_s">
|
|
|
|
</van-card>
|
|
|
|
|
|
</van-tab>
|
|
</van-tabs>
|
|
</div>
|
|
|
|
<van-tabbar v-model="active">
|
|
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
|
|
<van-tabbar-item icon="search">分类</van-tabbar-item>
|
|
<van-tabbar-item icon="friends-o">视频</van-tabbar-item>
|
|
<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
|
|
</van-tabbar>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
active: 0,
|
|
tabsActive: 0,
|
|
Tabs: [
|
|
{ id: 1, title: '头条', type: 'top', content: []},
|
|
{ id: 2, title: '社会', type: 'shehui', content: []},
|
|
{ id: 3, title: '国内', type: 'guonei', content: []},
|
|
{ id: 4, title: '国际', type: 'guoji', content: []},
|
|
{ id: 5, title: '娱乐', type: 'yule', content: []},
|
|
{ id: 6, title: '体育', type: 'tiyu', content: []},
|
|
{ id: 7, title: '军事', type: 'junshi', content: []},
|
|
{ id: 8, title: '科技', type: 'keji', content: []},
|
|
{ id: 9, title: '财经', type: 'caijing', content: []},
|
|
{ id: 10, title: '时尚', type: 'shishang', content: []}
|
|
]
|
|
},
|
|
created() {
|
|
this.getIndexData('top')
|
|
},
|
|
methods: {
|
|
changeTabs(index) {
|
|
if (this.Tabs[index].content.length === 0) {
|
|
this.getIndexData(this.Tabs[index].type)
|
|
}
|
|
},
|
|
getIndexData(type) {
|
|
axios.get('http://127.0.0.1:3000/index', {
|
|
params: {
|
|
type: type
|
|
}
|
|
}).then( (response) => {
|
|
this.Tabs[this.tabsActive].content = response.data.result.data
|
|
console.log(response.data.result.data);
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
},
|
|
onClickLeft() {
|
|
this.$toast.loading({
|
|
message: '加载中...',
|
|
forbidClick: true,
|
|
});
|
|
},
|
|
onClickRight() {
|
|
this.$toast.loading({
|
|
message: '加载中...',
|
|
forbidClick: true,
|
|
});
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</html> |