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>