uniapp——多头部tab的列表页

原創 BetterGG 2020-06-30 23:14

在这里插入图片描述

一、使用 vue 页面实现

点此查看录屏效果

  • 缺点一：见视频第18秒，先将列表向上滚动一部分内容，再一口气滑到顶部（即用力一滑，让页面自动滚动到顶部），会直接出发下拉刷新，一般是到顶部后就停了，再下拉才会触发下拉刷新，不过很多人滑到顶部本身就习惯再多下拉一下，刷新页面，保证到了顶部以及获取最新的数据，这有可能刚好符合某些人的需要。
  • 缺点二：见视频第20秒，下拉刷新与滑动切换可能会同时触发，导致感觉上不完美，但是不影响功能，不会导致bug，出现这个效果是因为列表在顶部了，此时手指斜向下拉，同时触发了滑动和下拉刷新的事件导致，不故意这么做的话，一般不会产生这种问题，即使故意这么做了，也不会导致数据加载错误。
  • 缺点一优化方案：使用一个 flag 做为 refresher-enabled 的属性值，判断滚动区域内容当前是否在最顶部，如果不在顶部，该值为 false，否则为 true。
  • 缺点二优化方案：同样使用一个 flag 做为 refresher-enabled 的属性值，同时使用 @transition 和 @animationfinish 监听 swiper 窗口是否开始滑动或滑动结束，在滑动开始时 flag = false，结束时 flag = true。
  • refresher-enabled 为 scroll-view 的属性，作用是设置是否可下拉刷新。

index.vue 页面代码

<template>
	<view class="tui-tabs">
		<scroll-view id="tab-bar" scroll-x scroll-with-animation class="tui-scroll-h" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
				<text class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.name }}</text>
			</view>
		</scroll-view>
		<view class="tui-line-h"></view>
		<swiper :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="tui-swiper-item" v-for="(tab, index1) in newsList" :key="index1">
				<scroll-view
					class="tui-scroll-v"
					:refresher-enabled="refresherEnabled"
					:refresher-triggered="tab.refreshing"
					refresher-background="#fafafa"
					enable-back-to-top
					:refresher-threshold="100"
					scroll-y
					@scrolltolower="loadMore(index1)"
					@refresherrefresh="onrefresh"
				>
					<view v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
						<news-item :itemData="newsitem" @close="close(index1, index2)" :lastChild="index2 === tab.data.length - 1" @click="goDetail(newsitem)"></news-item>
					</view>
					<view class="tui-loading-more" v-if="tab.isLoading || tab.pageIndex > 3">
						<text class="tui-loadmore-line" v-if="tab.pageIndex > 3"></text>
						<text class="tui-loading-more-text">{{ tab.loadingText }}</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import newsItem from './news-item.vue';

// 缓存最多页数
const MAX_CACHE_PAGEINDEX = 3;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;

const newsData = [
	{
		title: '温故知新老师们这些话要牢记',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3101,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '央视网新闻'
	},
	{
		title: '美国会表决通过新驻华大使 月底有望赴华',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3102,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '央视网新闻'
	},
	{
		title: '哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列金融专业排前列金融专业排前列金融专业排前列',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3103,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '粤港精英联盟'
	},
	{
		title: '科创板交易系统准备就绪,不存在首批名单',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3104,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '百科故事大全'
	},
	{
		title: '哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列金融专业排前列金融专业排前列金融专业排前列',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3103,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '粤港精英联盟'
	},
	{
		title: '科创板交易系统准备就绪,不存在首批名单',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3104,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '百科故事大全'
	},
	{
		title: '哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列金融专业排前列金融专业排前列金融专业排前列',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3103,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '粤港精英联盟'
	},
	{
		title: '科创板交易系统准备就绪,不存在首批名单',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3104,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '百科故事大全'
	},
];

export default {
	components: {
		newsItem
	},
	data() {
		return {
			isIos: false,
			newsList: [],
			cacheTab: [],
			tabIndex: 0,
			tabBars: [],
			scrollInto: '',
			showTips: false,
			navigateFlag: false,
			pulling: false,
			refreshIcon:
				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRBAMAAABYoVcFAAAAKlBMVEUAAACXl5eZmZmfn5+YmJiXl5eampqZmZmYmJiYmJiZmZmYmJiZmZmZmZl02B9kAAAADXRSTlMAQKAQ0GAsUN+wz5CA21ow0AAAAM5JREFUSMftzLEJAkEQheFR4WzjGji4wC5E0A7E0OgaEIwF4RqwJEEODKcX1114yQ/uhsLtY6Lh57NZ7Dz1heXd27Kwcb+WlQv3Vy1rWcta1rKW/1Q2R8PWt8FYdhPLi79ZLt33KB/hibJzH1E+PaAqRfqAcuMBVSlyMmy1C6hKka0CoCpBAlUJEmgsQQJVCRKoSpBAU0mSaCpJEk0lSSMaS5JG9FuK/IkeQkmSaEjikSSaRpJoHEmiIvOoyCwqMo+KzKMi8+hoZTtte5vDPrSGI5zJ/Z1kAAAAAElFTkSuQmCC'
		};
	},
	onLoad() {
		setTimeout(() => {
			this.tabBars = [
				{
					name: '热门',
					id: 'hot'
				},
				{
					name: '娱乐',
					id: 'yule'
				},
				{
					name: '体育',
					id: 'sports'
				},
				{
					name: '国内',
					id: 'domestic'
				},
				{
					name: '财经',
					id: 'finance'
				},
				{
					name: '科技',
					id: 'keji'
				},
				{
					name: '教育',
					id: 'education'
				},
				{
					name: '汽车',
					id: 'car'
				}
			]
			this.init()
		}, 200);
	},
	methods: {
		init() {
			this.newsList = this.randomfn();
		},
		randomfn() {
			let ary = [];
			for (let i = 0, length = this.tabBars.length; i < length; i++) {
				let aryItem = {
					loadingText: '正在加载...',
					refreshing: false,
					refreshText: '',
					data: [],
					isLoading: false,
					pageIndex: 1
				};
				if (i === 0) {
					aryItem.pageIndex = 2;
					aryItem.data = aryItem.data.concat(newsData);
				}
				ary.push(aryItem);
			}
			console.log(ary)
			return ary;
		},
		getList(index, refresh) {
			let activeTab = this.newsList[index];
			let list = newsData || [];
			if (refresh) {
				activeTab.data = [];
				activeTab.loadingText = '正在加载...';
				activeTab.pageIndex = 2;
				activeTab.data = list || [];
			} else {
				activeTab.data = activeTab.data.concat(list);
				activeTab.pageIndex++;
				activeTab.isLoading = false;
				//根据实际修改判断条件
				if (activeTab.pageIndex > 3) {
					activeTab.loadingText = '没有更多了';
				}
			}
		},
		goDetail(e) {
			if (this.navigateFlag) return;
			this.navigateFlag = true;
			uni.navigateTo({
				url: '/pages/template/news/newsDetail/newsDetail'
			});
			setTimeout(() => {
				this.navigateFlag = false;
			}, 200);
		},
		loadMore(e) {
			let activeTab = this.newsList[this.tabIndex];
			if (activeTab.pageIndex < 4 && !activeTab.isLoading) {
				activeTab.isLoading = true;
				setTimeout(() => {
					this.getList(this.tabIndex);
				}, 300);
			}
		},
		tabClick(e) {
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.switchTab(index);
		},
		tabChange(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab(index);
		},
		swiperTransition() {
			this.refresherEnabled = false;
		},
		swiperAnimationfinish() {
			this.refresherEnabled = true;
		},
		switchTab(index) {
			if (this.tabIndex === index) return;
			if (this.newsList[index].data.length === 0) {
				this.getList(index);
			}
			// 缓存 tabId
			if (this.newsList[this.tabIndex].pageIndex > MAX_CACHE_PAGEINDEX) {
				let isExist = this.cacheTab.indexOf(this.tabIndex);
				if (isExist < 0) {
					this.cacheTab.push(this.tabIndex);
					//console.log("cache index:: " + this.tabIndex);
				}
			}

			this.tabIndex = index;
			let scrollIndex = index - 1 < 0 ? 0 : index - 1;
			this.scrollInto = this.tabBars[scrollIndex].id;

			// 释放 tabId
			if (this.cacheTab.length > MAX_CACHE_PAGE) {
				let cacheIndex = this.cacheTab[0];
				this.clearTabData(cacheIndex);
				this.cacheTab.splice(0, 1);
				//console.log("remove cache index:: " + cacheIndex);
			}
		},
		clearTabData(e) {
			this.newsList[e].data.length = 0;
			this.newsList[e].loadingText = '加载更多...';
		},
		onrefresh(e) {
			var tab = this.newsList[this.tabIndex];
			if (tab.refreshing) {
				return;
			}

			tab.refreshing = true;

			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.getList(this.tabIndex, true);
				this.pulling = true;
				tab.refreshing = false;
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				});
				setTimeout(() => {
					// TODO fix ios和Android 动画时间相反问题
					this.pulling = false;
				}, 500);
			}, 3000);
		},
	},
	onPullDownRefresh() {
		console.log('onPullDownRefresh')
	}
};
</script>

<style>
page {
	width: 100%;
	min-height: 100%;
	display: flex;
	height: 100vh;
}

.tui-tabs {
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background-color: #fafafa;
}

.tui-scroll-h {
	white-space: nowrap;
	height: 80rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	/* #ifdef H5 */
	position: fixed;
	top: 44px;
	left: 0;
	z-index:999;
	/* #endif */
}

.tui-line-h {
	height: 1rpx;
	background-color: #cccccc;
	position: relative;
}

.tui-tab-item {
	display: inline-block;
	padding-left: 34rpx;
	padding-right: 34rpx;
	flex-wrap: nowrap;
}

.tui-tab-item-title {
	color: #555;
	font-size: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.tui-tab-item-title-active {
	color: #5677fc;
	font-size: 36rpx;
	font-weight: bold;
	border-bottom: 6rpx solid #5677fc;
	text-align: center;
	display: block;
	box-sizing: border-box;
}

.tui-swiper-box {
	height: 100%;
	overflow-y: auto;
	/* #ifdef H5 */
	margin-top: 80rpx;
	/* #endif */
}

.tui-swiper-item {
	flex: 1 !important;
	flex-direction: row;
}

.tui-scroll-v {
	width: 100%;
	height: 100%;
}

.tui-loading-more {
	align-items: center;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	position: relative;
}

.tui-loadmore-line {
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: #e5e5e5;
	width: 320rpx;
	position: absolute;
	z-index: -1;
}

.tui-loading-more-text {
	padding-left: 8rpx;
	padding-right: 8rpx;
	font-size: 28rpx;
	line-height: 28rpx;
	background-color: #fafafa;
	text-align: center;
	color: #999;
}
</style>

二、使用 nvue 页面实现

点此查看录屏效果

  • 这个方式没有以上 vue 页面方式的2个缺点，但有其他缺点
  • 缺点一：使用的是 nvue 页面，nvue 页面的 css 样式不支持很多特性
  • 缺点二：nvue 页面不支持常规模式引入的 iconfont 文字图标，必须使用其特定的方式引入，目前我试过，但还没试成功

index.nvue 页面代码（其内部组件可以是 vue 页面）

<template>
	<view class="tui-tabs">
		<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
				<!-- #ifdef APP-PLUS -->
				<text class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.name }}</text>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<view class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.name }}</view>
				<!-- #endif -->
			</view>
		</scroll-view>
		<view class="tui-line-h"></view>
		<swiper :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange">
			<swiper-item class="tui-swiper-item" v-for="(tab, index1) in newsList" :key="index1">
				<!-- #ifdef APP-NVUE -->
				<list class="tui-scroll-v" enableBackToTop="true" scroll-y loadmoreoffset="15" @loadmore="loadMore(index1)">
					<refresh class="tui-refresh" @refresh="onrefresh(index1)" @pullingdown="onpullingdown" :display="tab.refreshing ? 'show' : 'hide'">
						<div class="tui-refresh-view">
							<image
								class="tui-refresh-icon"
								:src="refreshIcon"
								:style="{ width: tab.refreshing || pulling ? 0 : '20px' }"
								:class="{ 'tui-refresh-icon-active': tab.refreshFlag }"
							></image>
							<loading-indicator class="tui-loading-icon" animating="true" v-if="tab.refreshing"></loading-indicator>
							<text class="tui-loading-text">{{ tab.refreshText }}</text>
						</div>
					</refresh>
					<cell v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
						<news-item :itemData="newsitem" @close="close(index1, index2)" :lastChild="index2 === tab.data.length - 1" @click="goDetail(newsitem)"></news-item>
					</cell>
					<cell class="tui-loading-more" v-if="tab.isLoading || tab.pageIndex > 3">
						<text class="tui-loadmore-line" v-if="tab.pageIndex > 3"></text>
						<text class="tui-loading-more-text">{{ tab.loadingText }}</text>
					</cell>
				</list>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<scroll-view
					class="tui-scroll-v"
					refresher-enabled
					:refresher-triggered="tab.refreshing"
					refresher-background="#fafafa"
					enable-back-to-top
					:refresher-threshold="100"
					scroll-y
					@scrolltolower="loadMore(index1)"
					@refresherrefresh="onrefresh"
				>
					<view v-for="(newsitem, index2) in tab.data" :key="newsitem.id">
						<news-item :itemData="newsitem" @close="close(index1, index2)" :lastChild="index2 === tab.data.length - 1" @click="goDetail(newsitem)"></news-item>
					</view>
					<view class="tui-loading-more" v-if="tab.isLoading || tab.pageIndex > 3">
						<text class="tui-loadmore-line" v-if="tab.pageIndex > 3"></text>
						<text class="tui-loading-more-text">{{ tab.loadingText }}</text>
					</view>
				</scroll-view>
				<!-- #endif -->
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import newsItem from './news-item.nvue';

// 缓存最多页数
const MAX_CACHE_PAGEINDEX = 3;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;

const newsData = [
	{
		title: '温故知新老师们这些话要牢记',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3101,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '央视网新闻'
	},
	{
		title: '美国会表决通过新驻华大使 月底有望赴华',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3102,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '央视网新闻'
	},
	{
		title: '哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列金融专业排前列金融专业排前列金融专业排前列',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3103,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '粤港精英联盟'
	},
	{
		title: '科创板交易系统准备就绪,不存在首批名单',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3104,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '百科故事大全'
	},
	{
		title: '哪些专业毕业后收入高?计算机、金融专业排前列金融专业排前列金融专业排前列金融专业排前列金融专业排前列',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3103,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '粤港精英联盟'
	},
	{
		title: '科创板交易系统准备就绪,不存在首批名单',
		image_url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90',
		comment_count: 3104,
		vote_count: 2356,
		dateTime: '2020-01-01',
		article_type: 1,
		source: '百科故事大全'
	},
];

export default {
	components: {
		newsItem
	},
	data() {
		return {
			isIos: false,
			newsList: [],
			cacheTab: [],
			tabIndex: 0,
			tabBars: [
				{
					name: '热门',
					id: 'hot'
				},
				{
					name: '娱乐',
					id: 'yule'
				},
				{
					name: '体育',
					id: 'sports'
				},
				{
					name: '国内',
					id: 'domestic'
				},
				{
					name: '财经',
					id: 'finance'
				},
				{
					name: '科技',
					id: 'keji'
				},
				{
					name: '教育',
					id: 'education'
				},
				{
					name: '汽车',
					id: 'car'
				}
			],
			scrollInto: '',
			showTips: false,
			navigateFlag: false,
			pulling: false,
			refreshIcon:
				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRBAMAAABYoVcFAAAAKlBMVEUAAACXl5eZmZmfn5+YmJiXl5eampqZmZmYmJiYmJiZmZmYmJiZmZmZmZl02B9kAAAADXRSTlMAQKAQ0GAsUN+wz5CA21ow0AAAAM5JREFUSMftzLEJAkEQheFR4WzjGji4wC5E0A7E0OgaEIwF4RqwJEEODKcX1114yQ/uhsLtY6Lh57NZ7Dz1heXd27Kwcb+WlQv3Vy1rWcta1rKW/1Q2R8PWt8FYdhPLi79ZLt33KB/hibJzH1E+PaAqRfqAcuMBVSlyMmy1C6hKka0CoCpBAlUJEmgsQQJVCRKoSpBAU0mSaCpJEk0lSSMaS5JG9FuK/IkeQkmSaEjikSSaRpJoHEmiIvOoyCwqMo+KzKMi8+hoZTtte5vDPrSGI5zJ/Z1kAAAAAElFTkSuQmCC'
		};
	},
	onLoad() {
		setTimeout(() => {
			this.newsList = this.randomfn();
			uni.getSystemInfo({
				success: res => {
					this.isIos = 'ios' == res.platform.toLocaleLowerCase();
				}
			});
		}, 200);
	},
	methods: {
		randomfn() {
			let ary = [];
			for (let i = 0, length = this.tabBars.length; i < length; i++) {
				let aryItem = {
					loadingText: '正在加载...',
					refreshing: false,
					refreshText: '',
					data: [],
					isLoading: false,
					pageIndex: 1
				};
				if (i === 0) {
					aryItem.pageIndex = 2;
					aryItem.data = aryItem.data.concat(newsData);
				}
				ary.push(aryItem);
			}
			console.log(ary)
			return ary;
		},
		getList(index, refresh) {
			let activeTab = this.newsList[index];
			let list = newsData || [];
			if (refresh) {
				activeTab.data = [];
				activeTab.loadingText = '正在加载...';
				activeTab.pageIndex = 2;
				activeTab.data = list || [];
			} else {
				activeTab.data = activeTab.data.concat(list);
				activeTab.pageIndex++;
				activeTab.isLoading = false;
				//根据实际修改判断条件
				if (activeTab.pageIndex > 3) {
					activeTab.loadingText = '没有更多了';
				}
			}
		},
		goDetail(e) {
			if (this.navigateFlag) return;
			this.navigateFlag = true;
			uni.navigateTo({
				url: '/pages/template/news/newsDetail/newsDetail'
			});
			setTimeout(() => {
				this.navigateFlag = false;
			}, 200);
		},
		loadMore(e) {
			let activeTab = this.newsList[this.tabIndex];
			if (activeTab.pageIndex < 4 && !activeTab.isLoading) {
				activeTab.isLoading = true;
				setTimeout(() => {
					this.getList(this.tabIndex);
				}, 300);
			}
		},
		tabClick(e) {
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.switchTab(index);
		},
		tabChange(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab(index);
		},
		switchTab(index) {
			if (this.tabIndex === index) return;
			if (this.newsList[index].data.length === 0) {
				this.getList(index);
			}
			// 缓存 tabId
			if (this.newsList[this.tabIndex].pageIndex > MAX_CACHE_PAGEINDEX) {
				let isExist = this.cacheTab.indexOf(this.tabIndex);
				if (isExist < 0) {
					this.cacheTab.push(this.tabIndex);
					//console.log("cache index:: " + this.tabIndex);
				}
			}

			this.tabIndex = index;
			let scrollIndex = index - 1 < 0 ? 0 : index - 1;
			this.scrollInto = this.tabBars[scrollIndex].id;

			// 释放 tabId
			if (this.cacheTab.length > MAX_CACHE_PAGE) {
				let cacheIndex = this.cacheTab[0];
				this.clearTabData(cacheIndex);
				this.cacheTab.splice(0, 1);
				//console.log("remove cache index:: " + cacheIndex);
			}
		},
		clearTabData(e) {
			this.newsList[e].data.length = 0;
			this.newsList[e].loadingText = '加载更多...';
		},
		onrefresh(e) {
			var tab = this.newsList[this.tabIndex];
			// #ifdef APP-PLUS
			if (!tab.refreshFlag) {
				return;
			}
			// #endif

			// #ifndef APP-PLUS
			if (tab.refreshing) {
				return;
			}
			// #endif

			tab.refreshing = true;
			tab.refreshText = '正在刷新...';

			setTimeout(() => {
				this.getList(this.tabIndex, true);
				this.pulling = true;
				tab.refreshing = false;
				tab.refreshFlag = false;
				tab.refreshText = '刷新成功';
				// #ifndef H5
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				});
				// #endif
				setTimeout(() => {
					// TODO fix ios和Android 动画时间相反问题
					this.pulling = false;
				}, 500);
			}, 1000);
		},
		onpullingdown(e) {
			var tab = this.newsList[this.tabIndex];
			if (tab.refreshing || this.pulling) {
				return;
			}
			if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
				tab.refreshFlag = true;
				tab.refreshText = '释放立即刷新';
			} else {
				tab.refreshFlag = false;
				tab.refreshText = '下拉可以刷新';
			}
		}
	}
};
</script>

<style>
/* #ifndef APP-PLUS */
page {
	width: 100%;
	min-height: 100%;
	display: flex;
}

/* #endif */

.tui-tabs {
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background-color: #fafafa;
	/* #ifdef MP-ALIPAY || MP-BAIDU */
	height: 100vh;
	/* #endif */
}

.tui-scroll-h {
	width: 750rpx;
	height: 80rpx;
	background-color: #ffffff;
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
	/* #ifdef H5 */
	position: fixed;
	top: 44px;
	left: 0;
	z-index:999;
	/* #endif */
}

.tui-line-h {
	/* #ifdef APP-PLUS */
	height: 1rpx;
	background-color: #cccccc;
	/* #endif */
	position: relative;
}
/* #ifndef APP-PLUS*/
.tui-line-h::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #cccccc;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}
/* #endif */

.tui-tab-item {
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	padding-left: 34rpx;
	padding-right: 34rpx;
}

.tui-tab-item-title {
	color: #555;
	font-size: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}

.tui-tab-item-title-active {
	color: #5677fc;
	font-size: 36rpx;
	font-weight: bold;
	border-bottom-width: 6rpx;
	border-style: solid;
	border-color: #5677fc;
	text-align: center;
}

.tui-swiper-box {
	flex: 1 !important;
	/* #ifdef H5 */
	margin-top: 80rpx;
	/* #endif */
}

.tui-swiper-item {
	flex: 1 !important;
	flex-direction: row;
}

.tui-scroll-v {
	flex: 1;
	/* #ifndef MP-ALIPAY */
	flex-direction: column;
	/* #endif */
	width: 750rpx;
}

.tui-update-tips {
	position: absolute;
	left: 0;
	top: 41px;
	right: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #fddd9b;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tui-update-tips-text {
	font-size: 14px;
	color: #ffffff;
}

.tui-refresh {
	width: 750rpx;
	height: 64px;
	justify-content: center;
}

.tui-refresh-view {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.tui-refresh-icon {
	width: 20px;
	height: 20px;
	transition-duration: 0.25s;
	transition-property: transform;
	transform: rotate(0deg);
	transform-origin: 10px 10px;
}

.tui-refresh-icon-active {
	transform: rotate(180deg);
}

.tui-loading-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	color: #999999;
}

.tui-loading-text {
	margin-left: 2px;
	font-size: 14px;
	color: #999999;
}

.tui-loading-more {
	align-items: center;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	position: relative;
}
.tui-loadmore-line {
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: #e5e5e5;
	width: 320rpx;
	position: absolute;
	z-index: -1;
}

.tui-loading-more-text {
	padding-left: 8rpx;
	padding-right: 8rpx;
	font-size: 28rpx;
	line-height: 28rpx;
	background-color: #fafafa;
	text-align: center;
	color: #999;
}
</style>

三、共同子组件的代码

newsItem.vue 组件代码

<template>
	<view class="media-item" v-if="itemData.title" @click="click">
		<view class="main">
			<text class="media-title media-title2">{{itemData.title}}</text>
			<view v-if="itemData.image_url" class="image-section flex-row image-section-left">
				<image class="image-list1 image-list2" :src="itemData.image_url"></image>
			</view>
		</view>
		<view class="media-foot flex-row">
			<view class="media-info flex-row">
				<text class="info-text">{{itemData.source}}</text>
				<text class="info-text">{{itemData.comment_count}}条评论</text>
				<text class="info-text">{{itemData.vote_count}}条投票</text>
				<text class="info-text">{{itemData.dateTime}}</text>
			</view>
		</view>
		<view class="media-item-line" style="position: absolute;"></view>
	</view>
</template>

<script>
	export default {
		props: {
			itemData: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			click() {
				this.$emit('click');
			},
		}
	}
</script>

<style scoped>
	.main {
		flexDirection: row-reverse;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-col {
		flex-direction: column;
	}

	.list-cell {
		padding: 0 30upx;
	}

	.uni-list-cell-hover {
		background-color: #eeeeee;
	}

	.media-item {
		position: relative;
		flex: 1;
		flex-direction: column;
		padding: 20upx 30upx 21upx 30upx;
	}

	.media-item-line {
		position: absolute;
		left: 30upx;
		right: 30upx;
		bottom: 0;
		height: 1upx;
		background-color: #ebebeb;
	}

	.media-image-right {
		flex-direction: row;
	}

	.media-image-left {
		flex-direction: row-reverse;
	}

	.media-title {
		flex: 1;
	}

	.media-title {
		lines: 3;
		text-overflow: ellipsis;
		font-size: 30upx;
		color: #555555;
	}

	.media-title2 {
		flex: 1;
		margin-top: 6upx;
		line-height: 40upx;
	}

	.image-section {
		margin-top: 20upx;
		flex-direction: row;
		justify-content: space-between;
	}

	.image-section-right {
		margin-top: 0upx;
		margin-left: 10upx;
		width: 225upx;
		height: 146upx;
	}

	.image-section-left {
		margin-top: 0upx;
		margin-right: 10upx;
		width: 225upx;
		height: 146upx;
	}

	.image-list1 {
		width: 690upx;
		height: 481upx;
	}

	.image-list2 {
		width: 225upx;
		height: 146upx;
	}

	.image-list3 {
		width: 225upx;
		height: 146upx;
	}

	.media-info {
		flex-direction: row;
		align-items: center;
	}

	.info-text {
		margin-right: 20upx;
		color: #999999;
		font-size: 24upx;
	}

	.media-foot {
		margin-top: 25upx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.close-view {
		position: relative;
		align-items: center;
		flex-direction: row;
		width: 40upx;
		height: 30upx;
		line-height: 30upx;
		border-width: 1upx;
		border-style: solid;
		border-color: #aaaaaa;
		border-radius: 4px;
		justify-content: center;
		text-align: center;
	}

	.close-l {
		position: absolute;
		width: 18upx;
		height: 1upx;
		background-color: #aaaaaa;
	}

	.close-h {
		transform: rotate(45deg);
	}

	.close-v {
		transform: rotate(-45deg);
	}
</style>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

uniapp json数据导出excel文件 微信小程序/app段兼容

這裏用到小程序和app段的api 微信小程序 wx.getFileSystemManager（） 獲取全局唯一的文件管理器 返回值 FileSystemManager 在調用 writeFile 方法 功能描述 寫文件 參數 Ob

原創 2023-08-14 12:24:51

抖音小程序右上角菜单设置

https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/retweet/tt-show-share-menu/   https://uniapp.

原創 2023-06-12 00:09:55

在 UniApp 中，uni.reLaunch、uni.navigateTo 和 uni.switchTab 三个方法都是用来进行页面跳转的，它们之间的区别如下：

在 UniApp 中，uni.reLaunch、uni.navigateTo 和 uni.switchTab 三個方法都是用來進行頁面跳轉的，它們之間的區別如下： uni.reLaunch: 關閉當前所有頁面，跳轉到應用內的某個頁面。該方

原創 2023-06-10 00:05:30

uniapp 使用.9启动图

使用自定義啓動圖，使用.9個圖片，文件名也要包含.9, 比如 啓動圖.9.png 類似這種 。9格式啓動圖，黑邊不能去除 邊是Android的.9.png圖片實現自適應的核心，因此不能去

原創 2023-04-27 12:27:38

前端app

列舉下我知道的app分類，歡迎留言討論 native app web app hybird app andriod ios原生 以前端爲主 pwa cordova ionic 各類小程序 熱門 小程序 uni-app

原創 2022-04-30 14:26:39

整理下自己这些年用过的技术，可能有遗漏，随时补充

按字母序（用過，精通說不上，每次都能有新感受，問題都能解決） ab apicloud beego bootstrap canvas css/3 composer consul docker easyswoole echarts ecmas

原創 2022-04-30 14:26:24

个人Scrum敏捷开发转型中的技术实践

Scrum無處不在，說起Scrum敏捷開發框架，也許大家並不陌生，表面理解它其實並不複雜，但是真正用得好的公司並不多，我自己曾經的工作環境也依然沒有體驗過敏捷開發非常成熟的實踐過程，但是我依然推薦這種開發方式，不論是對於企業發展還是生活中

原創 2022-04-30 12:48:30

uni-app 模拟机调试环境搭建

前言 最近接手了一份使用 uni-app 進行開發的工作，今天才有時間正式開始，在這裏記錄一下使用 HBuilderX 進行 uni-app 開發的調試環境搭建過程。 下載安裝 HBuilderX 進入 HbuilderX 官網 選擇你需

原創 2022-04-30 11:23:19

vue3和vite双向加持，uni-app性能再次提升

uni-app對vue3 & Vite的升級，是一個漸進式過程： 2020年9月：小程序平臺支持 vue3 開發，小程序平臺編譯器依然使用webpack； 2021年5月：H5平臺支持 vue3 開發，H5平臺編譯器升級爲 Vite； 2

原創 2022-04-30 10:26:11

uni-app 获取app当前版本及APP版本升级

App.vue文件中加入下面代碼，進行app版本升級更新 <script> export default { onLaunch: function() { // console.log

原創 2022-04-30 10:09:56

java版Spring Cloud+Spring Boot+mybatis+security+uniapp+Redis+MQ+VR全景+直播短视频带货+三级分销+b2b2c多商家入驻前后端分离商城源码

@源碼地址來源： https://minglisoft.cn/honghu/business.html 手機端源碼： /** * Copyright &copy; 2012-2017 <a href="http://minglisof

原創 2022-04-30 06:07:34

java版b2b2c多商家入驻微信小程序商城源码Spring Cloud+Spring Boot+mybatis+security+uniapp+直播带货+VR全景+前后端分离微服务商城源码

@源碼地址來源： https://minglisoft.cn/honghu/business.html /** * Copyright &copy; 2012-2017 <a href="http://minglisoft.cn">Ho

原創 2022-04-30 06:07:21

Spring Cloud+Mybatis+Uniapp 构建分布式微服务B2B2C O2O多商家入驻+直播+短视频带货+多端支持商城

1. 平臺簡介 一個全新覆蓋全行業，以直播、短視頻帶貨，商家實體VR全景體驗，多營銷模式，分銷分傭，多商家入駐，多端支持的大型新零售電商平臺。 2. 平臺清單 系統管理平臺 + 商家端（PC+手機） + 消費端微服務 + 消費端（小程序

原創 2022-04-30 06:07:18

uniapp使用echarts _ 速度上手

uniapp使用echarts _ 速度上手 插件地址：https://ext.dcloud.net.cn/plugin?id=6983 gitee地址：https://gitee.com/suixinxingyanghao/uniapp

原創 2021-12-25 21:46:19

uniapp保存base64位图片

uniapp保存base64位圖片 後端返回數據：   以前都是返回一個網絡連接，第一次看到這樣懵逼了，問了一下後端，是直接返回二進制流的。 遇到問題，當然打印一些（好傢伙，我還以爲亂碼了！） 處理方法 1.修改返回數據類型（修改封

原創 2021-12-25 21:46:19