You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.3 KiB
124 lines
3.3 KiB
<template>
|
|
<view>
|
|
<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom">
|
|
<view class="tab-item"
|
|
:class="current==index?'text-orange':'text-black1'"
|
|
v-for="(item, index) in tab_list" :key="index"
|
|
@click="changeTab(index)">{{ item.name }}
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 120rpx)'}"
|
|
:scroll-y="true" :refresher-enabled="true"
|
|
:refresher-triggered="isRefresher"
|
|
@scrolltolower="onScrolltolower"
|
|
@refresherrefresh="onRefresherrefresh"
|
|
v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"
|
|
v-if="tabIndex == current">
|
|
<view class="flex lf-p-30 solid-bottom" v-for="(item, index) in tabItem.list" :key="index">
|
|
<view>
|
|
<image :src="item.avatar" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="flex flex-direction justify-around lf-p-l-20">
|
|
<view class="lf-font-32 text-black1">{{item.username}} <text class="bg-red lf-font-24 lf-m-l-10" style="border-radius: 30rpx;padding: 5rpx 16rpx;">{{item.state}}</text></view>
|
|
<view class="lf-font-24 lf-color-gray">{{item.created_at}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 空数据的情况 -->
|
|
<view class="loading-more">
|
|
<text v-if="tabItem.list.length" :class="{'loading-more-text': tabItem.loadingClass}">{{ tabItem.loadingText }}</text>
|
|
<my-nocontent v-else></my-nocontent>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: 0, // tab下标
|
|
pageSize: 10,
|
|
isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
|
|
windowHeight: 0,
|
|
tab_list: [{
|
|
name: '内部粉丝',
|
|
list: [],
|
|
page: 1,
|
|
isPage: false,
|
|
loadingClass: false,
|
|
loadingText: '已加载全部数据'
|
|
},{
|
|
name: '外部粉丝',
|
|
list: [],
|
|
page: 1,
|
|
isPage: false,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中'
|
|
}]
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.windowHeight = uni.getSystemInfoSync().windowHeight;
|
|
this.getInFans()
|
|
},
|
|
methods: {
|
|
changeTab(index) {
|
|
if(this.current == index) {
|
|
return
|
|
}else {
|
|
this.current = index
|
|
this.getInFans()
|
|
}
|
|
},
|
|
getInFans() {
|
|
let per_page = this.pageSize;
|
|
let tab_item = this.tab_list[this.current];
|
|
let fansType = this.current+1
|
|
this.$http(this.API.API_FANS, {
|
|
page: tab_item.page,
|
|
limit: per_page,
|
|
type: fansType
|
|
}).then(res => {
|
|
this.isRefresher = false;
|
|
let isPage = res.data.has_more_page;
|
|
tab_item.isPage = isPage;
|
|
if(!isPage){
|
|
tab_item.loadingClass = false;
|
|
tab_item.loadingText = '没有更多数据啦~';
|
|
}
|
|
if(tab_item.page == 1){
|
|
tab_item.list = res.data.items;
|
|
}else{
|
|
tab_item.list.push(...res.data.items);
|
|
}
|
|
})
|
|
},
|
|
// 页面触底，加载下一页
|
|
onScrolltolower(){
|
|
let tab_item = this.tab_list[this.current];
|
|
if(tab_item.isPage){
|
|
tab_item.page = tab_item.page + 1;
|
|
this.getInFans()
|
|
}
|
|
},
|
|
// scroll-view 下拉刷新
|
|
onRefresherrefresh(){
|
|
this.isRefresher = true;
|
|
this.getInFans()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-item{
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
font-size: 32rpx;
|
|
&:first-child{
|
|
border-right: 2rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
</style>
|