126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<template>
|
|
<view class="ex-box">
|
|
<view class="census">
|
|
<view class="acount">{{list.length}}人</view>
|
|
<view>当前粉丝</view>
|
|
</view>
|
|
<view class="name-list" v-for="(item, index) in list" :key="index">
|
|
<u-image :src="item.photo" width="80"
|
|
shape="circle"
|
|
height="80" class="photo-box"></u-image>
|
|
<view>{{item.name}}</view>
|
|
</view>
|
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
status: 'loadmore',
|
|
iconType: 'flower',
|
|
loadText: {
|
|
loadmore: '上拉加载更多',
|
|
loading: '努力加载中',
|
|
nomore: '没有更多了'
|
|
},
|
|
list: [
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
},
|
|
{
|
|
photo: '../../static/img/fz_icon_gb/fz_icon_gb.png',
|
|
name: '1234'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载更多
|
|
loadmore () {
|
|
console.log('触发加载更多')
|
|
}
|
|
},
|
|
onReachBottom () {
|
|
console.log('onReachBottom')
|
|
if(this.page >= 3) return ;
|
|
this.status = 'loading';
|
|
this.page = ++ this.page;
|
|
setTimeout(() => {
|
|
this.list += 10;
|
|
if(this.page >= 3) this.status = 'nomore';
|
|
else this.status = 'loading';
|
|
}, 2000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ex-box {
|
|
font-weight: 400;
|
|
margin: 0 20rpx;
|
|
& .census {
|
|
margin-top: 40rpx;
|
|
margin-bottom: 54rpx;
|
|
height: 180rpx;
|
|
background: #2B3062;
|
|
border-radius: 14rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
letter-spacing: 0.86rpx;
|
|
& .acount {
|
|
letter-spacing: 1.31rpx;
|
|
font-size: 46rpx;
|
|
}
|
|
}
|
|
& .name-list {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx 50rpx;
|
|
|
|
font-size: 28rpx;
|
|
color: #FE192F;
|
|
line-height: 40rpx;
|
|
}
|
|
& .photo-box {
|
|
margin-right: 32rpx;
|
|
// width: 80rpx;
|
|
// height: 80rpx;
|
|
}
|
|
}
|
|
</style>
|