84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
||
<view class="home">
|
||
<div class="header">
|
||
<div class="header_search theme_color">
|
||
<i class="iconfont icon-taozi1"></i>
|
||
<div class="search">
|
||
<i class="iconfont icon-search"></i>
|
||
<span>198万张图，有你想要的...</span>
|
||
</div>
|
||
<i class="iconfont icon-wo"></i>
|
||
</div>
|
||
<div class="header_menu">
|
||
<scroll-view class="menu_list" scroll-x="true" :scroll-into-view="into">
|
||
<text @click="GetList(i)" v-for="(v,i) in list" :id="v.into" :class="i==Index?'active': ''" :key="i">{{ v.title }}</text>
|
||
</scroll-view>
|
||
<i class="iconfont icon-edit"></i>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<swiper class="swiper" :current="Index" @change="pageChange">
|
||
<swiper-item v-for="(v,i) in list" :key="i">
|
||
<view class="swiper-item" v-for="(it,index) in v.content" :key="index">
|
||
{{ it.title }}
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
into: "",
|
||
Index: 0,
|
||
list: []
|
||
}
|
||
},
|
||
async created() {
|
||
await this.getType();
|
||
await this.getClassList();
|
||
},
|
||
methods: {
|
||
async pageChange(event) {
|
||
let { current } = event.detail
|
||
this.Index = current;
|
||
this.into = `title${current}`
|
||
await this.getClassList();
|
||
},
|
||
async GetList(i) {
|
||
this.Index = i;
|
||
},
|
||
async getType() {
|
||
let res = await this.$http.index.type();
|
||
this.list = res.principal;
|
||
},
|
||
async getClassList() {
|
||
if (this.list[this.Index].content.length == 0) {
|
||
let res = await this.$http.index.classList({
|
||
page: this.list[this.Index].page,
|
||
id: this.list[this.Index].id,
|
||
});
|
||
|
||
this.list[this.Index].page = res.current_page
|
||
this.list[this.Index].total_page = res.total_page
|
||
this.list[this.Index].content = [
|
||
...this.list[this.Index].content,
|
||
...res.data
|
||
]
|
||
console.log("this.list ==== ", this.list)
|
||
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "@/less/page/index.less";
|
||
</style>
|