封装tab导航栏组件

tab导航栏功能实现

上啦加载功能实现

<template>
	<view>
		<!-- 自定义导航栏 -->
		<newsNavBar :tabBars="tabBars" :tabIndex="tabIndex" @change-tab="changeTab"></newsNavBar>

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight?swiperHeight + 'px':'100vh''}" :current="tabIndex" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
						<!-- 列表 -->
						<block v-for="(item, index) in guanzhu.list">
							<commonList :item="item" :index="index"></commonList>
						</block>
						<!-- 上啦加载 -->
						<loadMore :loadtext="guanzhu.loadtext"></loadMore>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						话题
					</scroll-view>
				</swiper-item>
			</swiper>
			</block>
		</view>

	</view>
</template>

<script>
	import commonList from '../../components/common/common-list.vue'
	// tabbar组件
	import newsNavBar from '../../components/news/news-nav-bar.vue'
	// 加载更多
	import loadMore from '../../components/common/load-more.vue'
	export default {
		components: {
			commonList,
			newsNavBar,
			loadMore
		},
		methods: {
			// tab切换
			changeTab(index) {
				this.tabIndex = index
			},
			// 滑动事件
			tabChange(e) {
				const {
					current
				} = e.detail
				this.tabIndex = current
			},
			// 上啦加载
			loadmore(index) {
				if (this.guanzhu.loadtext !== "上啦加载更多") {
					return
				}
				// 修改状态
				this.guanzhu.loadtext = "加载中。。。"
				// 获取数据
				setTimeout(() => {
					// 获取完成
					let obj = {
						userpic: '../../static/demo/userpic/17.jpg',
						username: '哈哈',
						sex: 1, // 0 男 1 女
						age: 25,
						isguanzhu: true,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '湖南 长沙',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					}
					this.guanzhu.list.push(obj)
					this.guanzhu.loadtext = "上啦加载更多"
				}, 1000)
				// this.guanzhu.loadtext = "没有更多数据了"
			},
		},
	}
</script>