127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<template>
|
||
<view class="home">
|
||
<view class="header" :style="{ paddingTop: $sys.statusBarHeight+'px' }">
|
||
<view class="header_search">
|
||
<i class="iconfont icon-taozi1"></i>
|
||
<view class="search">
|
||
<i class="iconfont icon-search"></i>
|
||
<text>198万张图，有你想要的...</text>
|
||
</view>
|
||
<navigator class="iconfont icon-wo"></navigator>
|
||
</view>
|
||
|
||
<view class="header_menu">
|
||
<scroll-view scroll-x="true" class="menu_list" :scroll-into-view="into">
|
||
<view
|
||
class="menu_item"
|
||
:class="index == currentIndex ? 'active' : ''"
|
||
v-for="(item, index) in principal"
|
||
:key="index"
|
||
:id="'into' + index"
|
||
@click="changeActive(index)"
|
||
>{{ item.title }}</view
|
||
>
|
||
</scroll-view>
|
||
<navigator url="" class="iconfont icon-edit"> </navigator>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<swiper class="swiper" :current="currentIndex" @change="SwiperChange">
|
||
<swiper-item v-for="(item, index) in principal" :key="index">
|
||
<scroll-view
|
||
scroll-y
|
||
class="swiper_scroll"
|
||
@scrolltolower="loadMore(index)"
|
||
>
|
||
<view class="swiper-item" v-for="(v, i) in item.content" :key="i">
|
||
{{ v.title }}
|
||
</view>
|
||
<uni-load-more :status="item.loadStatus" v-if="index != 0"></uni-load-more>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentIndex: 0,
|
||
into: "into0",
|
||
principal: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.getType();
|
||
},
|
||
methods: {
|
||
loadMore(index) {
|
||
this.principal[this.currentIndex].page += 1;
|
||
if (
|
||
this.principal[this.currentIndex].page <=
|
||
this.principal[this.currentIndex].total_page
|
||
) {
|
||
this.getClassList("more");
|
||
} else {
|
||
this.principal[this.currentIndex].loadStatus = "noMore";
|
||
}
|
||
},
|
||
SwiperChange(event) {
|
||
this.currentIndex = event.detail.current;
|
||
this.changeInto();
|
||
this.getClassList();
|
||
},
|
||
changeActive(index) {
|
||
this.currentIndex = index;
|
||
},
|
||
changeInto() {
|
||
this.into = `into${this.currentIndex}`;
|
||
},
|
||
async getType() {
|
||
let res = await this.$http.index.type();
|
||
this.principal = res.principal;
|
||
await this.getClassList();
|
||
},
|
||
async getClassList(type = "click") {
|
||
|
||
var getList = async () => {
|
||
this.principal[this.currentIndex].loadStatus = "loading";
|
||
let res = await this.$http.index.classList({
|
||
page: this.principal[this.currentIndex].page,
|
||
id: this.principal[this.currentIndex].id,
|
||
});
|
||
|
||
this.principal[this.currentIndex].content = [
|
||
...this.principal[this.currentIndex].content,
|
||
...res.data,
|
||
];
|
||
|
||
this.principal[this.currentIndex].page = res.current_page;
|
||
this.principal[this.currentIndex].total_page = res.total_page;
|
||
|
||
this.principal[this.currentIndex].loadStatus = "more";
|
||
};
|
||
|
||
if (type == "click") {
|
||
if (
|
||
this.principal[this.currentIndex].id != -1 &&
|
||
this.principal[this.currentIndex].content.length == 0
|
||
) {
|
||
getList();
|
||
}
|
||
|
||
} else {
|
||
getList();
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "~@/less/page/home.less";
|
||
</style>
|