好友列表组件开发

<template>
	<view class="user">
		<!-- tab切换 -->
		<swiperTabHead :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollStyle="border-bottom:0;"
		 scrollItemStyle="width:33%;"></swiperTabHead>

		<!-- 好友列表 -->
<!-- 		<block v-for="(item, index) in list" :key="index">
			<<userList :item="item" :index="index"></userList>
		</block> -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight?swiperHeight + 'px':'100vh'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newsList" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length > 0">
							<!-- 图文内容区域 -->
							<block v-for="(item, index1) in items.list" :key="index1">
								<userList :item="item" :index="index1"></userList>
							</block>
							<!-- 上啦加载 -->
							<loadMore :loadtext="items.loadtext"></loadMore>
						</template>
						<template v-else>
							<!-- 无内容默认 -->
							<nothing></nothing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
			</block>
		</view>
	</view>
</template>

<script>
	// swiper头部组件
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import userList from '../../components/user-list/user-list.vue'
	import loadMore from '../../components/common/load-more.vue'
		import nothing from '../../components/common/no-thing.vue'
	export default {
		components: {
			swiperTabHead,
			userList,
			loadMore,
			nothing 
		},
		data() {
			return {
				swiperHeight: 0,
				tabIndex: 0,
				tabBars: [{
						name: "互关",
						id: "huguan",
						num: 10
					},
					{
						name: "关注",
						id: "guanzhu",
						num: 20
					},
					{
						name: "粉丝",
						id: "fensi",
						num: 30
					}
				],
				newsList: [
					{
						loadtext: '上啦加载更多',
						list: [{
							userpic: "../../static/demo/userpic/6.jpg",
							username: "星城哈哈",
							age: 20,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/7.jpg",
							username: "星城",
							age: 24,
							sex: 1,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/8.jpg",
							username: "哈哈",
							age: 18,
							sex: 0,
							isguanzhu: false
						},
						{
							userpic: "../../static/demo/userpic/7.jpg",
							username: "星城",
							age: 24,
							sex: 1,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/8.jpg",
							username: "哈哈",
							age: 18,
							sex: 0,
							isguanzhu: false
						},
						{
							userpic: "../../static/demo/userpic/7.jpg",
							username: "星城",
							age: 24,
							sex: 1,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/8.jpg",
							username: "哈哈",
							age: 18,
							sex: 0,
							isguanzhu: false
						}
						]
					},
					{
						loadtext: '上啦加载更多',
						list: [{
							userpic: "../../static/demo/userpic/6.jpg",
							username: "嘻嘻嘻",
							age: 20,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/7.jpg",
							username: "星城",
							age: 24,
							sex: 1,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/8.jpg",
							username: "哈哈",
							age: 18,
							sex: 0,
							isguanzhu: false
						},
						]
					},
					{
						loadtext: '上啦加载更多',
						list: [{
							userpic: "../../static/demo/userpic/6.jpg",
							username: "呜呜呜",
							age: 20,
							sex: 0,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/7.jpg",
							username: "星城",
							age: 24,
							sex: 1,
							isguanzhu: true
						},
						{
							userpic: "../../static/demo/userpic/8.jpg",
							username: "哈哈",
							age: 18,
							sex: 0,
							isguanzhu: false
						},
						]
					},
				]
				
			}
		},
		// 监听导航按钮事件
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		// 获取设备高度
		onShow() {
			let swiperHeight = this.swiperHeight
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(110)
					this.swiperHeight = height
				}
			})
		},
		methods: {
			// 上啦加载
			loadmore(index) {
				if (this.newsList[index].loadtext !== "上啦加载更多") {
					return
				}
				// 修改状态
				this.newsList[index].loadtext = "加载中。。。"
				// 获取数据
				setTimeout(() => {
					// 获取完成
					let obj = {
							userpic: "../../static/demo/userpic/6.jpg",
							username: "星城哈哈",
							age: 20,
							sex: 0,
							isguanzhu: true
						}
					this.newsList[index].list.push(obj)
					this.newsList[index].loadtext = "上啦加载更多"
				}, 1000)
				// this.newsList[index].loadtext = "没有更多数据了"
			},
			// tabbar点击事件
			tabtap(index) {
				this.tabIndex = index
			},
			// 滑动事件
			tabChange(e) {
				const {
					current
				} = e.detail
				this.tabIndex = current
			}
		}
	}
</script>

<style lang="less" scoped>
</style>