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.
83 lines
3.2 KiB
83 lines
3.2 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="lf-font-32" style="width: 50%;border-right: 1px solid rgba(0, 0, 0, 0.1);box-sizing: border-box;" :class="tabIndex ==0?'text-orange':'text-black1'" @click="tabIndex = 0">内部粉丝</view>
|
|
<view class="lf-font-32" style="width: 50%;" :class="tabIndex ==1?'text-orange':'text-black1'" @click="tabIndex = 1">外部粉丝</view>
|
|
</view>
|
|
|
|
<block v-if="tabIndex == 0">
|
|
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
|
|
<view class="flex lf-p-30 solid-bottom" v-for="i of 15">
|
|
<view>
|
|
<image src="../../static/center/shop-logo.png" 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">时空网的内部网友 <text class="bg-red lf-font-24 lf-m-l-10" style="border-radius: 30rpx;padding: 5rpx 16rpx;">达人</text></view>
|
|
<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view>
|
|
</view>
|
|
</view>
|
|
<!-- 空数据的情况 -->
|
|
<view class="loading-more">
|
|
<text v-if="!tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
|
|
<my-nocontent v-else></my-nocontent>
|
|
</view>
|
|
<!-- 回到顶部 -->
|
|
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
|
|
</scroll-view>
|
|
</block>
|
|
<block v-else>
|
|
<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
|
|
<view class="flex lf-p-30 solid-bottom" v-for="i of 15">
|
|
<view>
|
|
<image src="../../static/center/shop-logo.png" 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">时空网的外部网友</view>
|
|
<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view>
|
|
</view>
|
|
</view>
|
|
<!-- 空数据的情况 -->
|
|
<view class="loading-more">
|
|
<text v-if="!tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
|
|
<my-nocontent v-else></my-nocontent>
|
|
</view>
|
|
<!-- 回到顶部 -->
|
|
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
|
|
</scroll-view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabIndex: 0,
|
|
pageSize: 10,
|
|
isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
|
|
page: 1,
|
|
isPage: false
|
|
}
|
|
},
|
|
methods: {
|
|
// 页面触底，加载下一页
|
|
onScrolltolower(){
|
|
console.log('加载下一页')
|
|
},
|
|
// scroll-view 下拉刷新
|
|
onRefresherrefresh(){
|
|
this.isRefresher = true;
|
|
console.log('下拉刷新')
|
|
setTimeout(() => {
|
|
this.isRefresher = false;
|
|
},1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.com {
|
|
height: 1300rpx;
|
|
}
|
|
</style>
|