提交

pages/newsSquare/newsSquare.vue

@@ -19,32 +19,18 @@
 				</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>
+
+		<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>
+				<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">
 					取消
@@ -54,20 +40,11 @@
 				<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 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>
+						<news-list ref="swiperList" :tabIndex="index" :currentIndex="current" :title="title"
+							@heightChanged="heightChanged"></news-list>
 					</swiper-item>
 				</swiper>
 			</view>
@@ -76,117 +53,118 @@
 </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'
-			})
+	export default {
+		data() {
+			return {
+				refresherStatus: 0,
+				swiperHeight: 0,
+				tabList: ['发布', '热线', '嗨享'],
+				current: 0, // tabs组件的current值，表示当前活动的tab选项
+				searchModal: false,
+				historySearch: [],
+				title: '',
+				keyword: ''
+			};
 		},
-		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){
+		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;
 			}
-			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{
+	.loadingBox {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: red;
+	}
+
+	.addNewsBtn {
 		position: fixed;
 		width: 56px;
 		height: 56px;
@@ -203,15 +181,18 @@ export default {
 		// background-repeat: no-repeat;
 		// background-size: 120%;
 		z-index: 150;
-		.addIcon{
+
+		.addIcon {
 			font-size: 30px;
 			line-height: 30px;
 		}
-		.addText{
+
+		.addText {
 			font-size: 12px;
 		}
 	}
-	.searchModal{
+
+	.searchModal {
 		position: absolute;
 		top: 44px;
 		right: 0;
@@ -221,20 +202,24 @@ export default {
 		background-color: #fff;
 		box-sizing: border-box;
 		padding: 0 15px;
-		.textTips{
+
+		.textTips {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			margin-top: 15px;
-			.del{
+
+			.del {
 				width: 32rpx;
 				height: 32rpx;
 			}
 		}
-		.serachBox{
+
+		.serachBox {
 			display: flex;
 			flex-wrap: wrap;
-			.serachItem{
+
+			.serachItem {
 				margin-top: 20px;
 				padding: 8rpx 16rpx;
 				max-width: 100%;
@@ -243,49 +228,53 @@ export default {
 			}
 		}
 	}
-.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;
+
+	.header {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		box-sizing: border-box;
+		padding: 0 15px;
 		height: 44px;
-		line-height: 44px;
-		text-align: right;
+		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;
+		}
 	}
-	.input{
-		width: 526rpx;
+
+	.banner-view {
+		background-color: #007aff;
+		color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 	}
-}
-.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;
-}
+	.paging-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
 
-.swiper {
-	height: 1000px;
-}
+	.swiper {
+		height: 1000px;
+	}
 </style>