broke_news_wx/pages/newsSquare/newsSquare.vue

<template>
	<view class="content">
		<view class="addNewsBtn" @click="toPublishPage()">
			<view class="addIcon">
				+
			</view>
			<view class="addText">
				帮忙
			</view>
		</view>
		<view class="searchModal" v-show="searchModal">
			<div class="textTips">
				<text>搜索历史</text>
				<image src="../../static/image/del.png" class="del" @click="clearHistory()"></image>
			</div>
			<div class="serachBox">
				<div class="serachItem" @click="searchKey(item)" v-for="(item,index) in historySearch" :key="index">
					{{ item }}
				</div>
			</div>
		</view>

		<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :refresher-status.sync="refresherStatus"
			@scrolltolower="scrolltolower" :auto-hide-loading-after-first-loaded="false" :loading-full-fixed="true"
			:auto-clean-list-when-reload="false">
			<view slot="loading">

			</view>
			<!-- 自定义下拉刷新view -->
			<!-- <custom-refresher slot="refresher" :status="refresherStatus"></custom-refresher> -->
			<view class="header">
				<uni-easyinput class="input" prefixIcon="search" placeholder="请输入关键字查询" @focus="inputFocus()"
					@confirm="inputConfirm()" v-model="keyword" :clearable="false"></uni-easyinput>
				<view class="myNews" @click="toMyNews">我的求助</view>
				<view class="closeModalBox" @click="closeSearchModal" v-show="searchModal">
					取消
				</view>
			</view>
			<view>
				<view style="z-index: 100;position: sticky;top :44px;">
					<tabs-view @change="tabsChange" :current="current" :items="tabList"></tabs-view>
				</view>
				<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
						<news-list ref="swiperList" :tabIndex="index" :currentIndex="current" :title="title"
							@heightChanged="heightChanged"></news-list>
					</swiper-item>
				</swiper>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refresherStatus: 0,
				swiperHeight: 0,
				tabList: ['发布', '热线', '嗨享'],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				searchModal: false,
				historySearch: [],
				title: '',
				keyword: ''
			};
		},
		methods: {
			toPublishPage() {
				uni.navigateTo({
					url: '../publishNews/publishNews'
				})
			},
			toMyNews() {
				uni.navigateTo({
					url: '/pages/myNews/myNews'
				})
			},
			clearHistory() {
				uni.removeStorageSync('historySearch');
				this.historySearch = []
			},
			inputConfirm(e) {
				this.title = e
				let historyArr = JSON.parse(JSON.stringify(this.historySearch))
				if (historyArr.length >= 8) {
					historyArr.pop(1)
				}
				historyArr.unshift(e)
				historyArr = [...new Set(historyArr)]
				this.historySearch = historyArr
				this.$nextTick(() => {
					this.onRefresh()
				})
				uni.setStorageSync('historySearch', JSON.stringify(this.historySearch));
				this.closeSearchModal()
			},
			searchKey(e) {
				this.title = e
				this.keyword = e
				this.$nextTick(() => {
					this.onRefresh()
				})
				this.closeSearchModal()
			},
			inputFocus() {
				try {
					let searchStr = uni.getStorageSync('historySearch')
					this.historySearch = searchStr ? JSON.parse(searchStr) : []
				} catch (e) {
					this.historySearch = []
				}
				this.searchModal = true
			},
			closeSearchModal() {
				this.searchModal = false
			},
			//tabs通知swiper切换
			tabsChange(index) {
				this._setCurrent(index);
			},
			//下拉刷新时，通知当前显示的列表进行reload操作
			onRefresh() {
				this.$refs.swiperList[this.current].reload(() => {
					this.$refs.paging.complete([]);
				});
			},
			//当滚动到底部时，通知当前显示的列表加载更多
			scrolltolower() {
				this.$refs.swiperList[this.current].doLoadMore();
			},
			// swiper滑动结束
			animationfinish(e) {
				let current = e.detail.current;
				this._setCurrent(current);
			},
			//设置swiper的高度
			heightChanged(height) {
				if (height === 0) {
					//默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
					height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
				}
				this.swiperHeight = height;
			},
			_setCurrent(current) {
				if (current !== this.current) {
					//切换tab时，将上一个tab的数据清空
					this.$refs.swiperList[this.current].clear();
				}
				this.current = current;
			}
		}
	};
</script>

<style scoped lang="scss">
	.loadingBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: red;
	}

	.addNewsBtn {
		position: fixed;
		width: 56px;
		height: 56px;
		right: 15px;
		border-radius: 50%;
		background-color: #3466EB;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		bottom: 150px;
		// background-image: url('../../static/image/addNews.png');
		// background-position: center;
		// background-repeat: no-repeat;
		// background-size: 120%;
		z-index: 150;

		.addIcon {
			font-size: 30px;
			line-height: 30px;
		}

		.addText {
			font-size: 12px;
		}
	}

	.searchModal {
		position: absolute;
		top: 44px;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 200;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 15px;

		.textTips {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 15px;

			.del {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.serachBox {
			display: flex;
			flex-wrap: wrap;

			.serachItem {
				margin-top: 20px;
				padding: 8rpx 16rpx;
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 15px;
		height: 44px;
		position: sticky;
		z-index: 100;
		background-color: #FFFFFF;
		top: 0;

		.myNews {}

		.closeModalBox {
			position: absolute;
			right: 15px;
			width: 150rpx;
			background-color: #fff;
			height: 44px;
			line-height: 44px;
			text-align: right;
		}

		.input {
			width: 526rpx;
		}
	}

	.banner-view {
		background-color: #007aff;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.paging-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.swiper {
		height: 1000px;
	}
</style>