首页下啦刷新

pages.json

@@ -2,7 +2,8 @@
 	"pages": [{
 			"path": "pages/list/list",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationStyle": "custom",
+				"enablePullDownRefresh":true
 			}
 		},
 		{

pages/list/list.vue

 <template>
-	<view style="overflow: hidden;">
-		<!-- 搜索栏 -->
-		<news-search-title></news-search-title>
+	<view style="overflow: hidden;">
 		<!-- 页面主列表 -->
 		<news-list ref="newsList" :searchText="searchText"></news-list>
 	</view>
@@ -74,148 +72,4 @@
 		min-height: 100%;
 		height: auto;
 	}
-
-	.tips {
-		color: #67c23a;
-		font-size: 14px;
-		line-height: 40px;
-		text-align: center;
-		background-color: #f0f9eb;
-		height: 0;
-		opacity: 0;
-		transform: translateY(-100%);
-		transition: all 0.3s;
-	}
-
-	.tips-ani {
-		transform: translateY(0);
-		height: 40px;
-		opacity: 1;
-	}
-
-	.shop {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-	}
-
-	.shop-picture {
-		width: 110px;
-		height: 110px;
-	}
-
-	.shop-picture-column {
-		width: 100%;
-		height: 170px;
-		margin-bottom: 10px;
-	}
-	
-	.ellipsis {
-		display: flex;
-		overflow: hidden;
-	}
-
-	.uni-ellipsis-1 {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.uni-ellipsis-2 {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-	}
-	.uni-note{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		flex-wrap: nowrap;
-	}
-
-	// 默认加入 scoped ，所以外面加一层提升权重
-	.list {
-		// margin-top: 52px;
-
-		.uni-list--waterfall {
-
-			/* #ifndef H5 || APP-VUE */
-			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
-			/deep/ .uni-list {
-				/* #endif */
-				display: flex;
-				flex-direction: row;
-				flex-wrap: wrap;
-				padding: 5px;
-				box-sizing: border-box;
-
-				/* #ifdef H5 || APP-VUE */
-				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
-				/deep/
-				/* #endif */
-				.uni-list-item--waterfall {
-					width: 50%;
-					box-sizing: border-box;
-
-					.uni-list-item__container {
-						padding: 5px;
-						flex-direction: column;
-					}
-				}
-
-				/* #ifndef H5 || APP-VUE */
-			}
-
-			/* #endif */
-		}
-	}
-
-	.search-icons {
-		padding: 16rpx;
-	}
-
-	.search-container-bar {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		// position: fixed;
-		// left: 0;
-		// right: 0;
-		// z-index: 10;
-		background-color: #fff;
-	}
-
-	/* #ifndef APP-NVUE */
-	/deep/
-	/* #endif */
-	.uni-searchbar__box {
-		border-width: 0;
-	}
-
-	/* #ifndef APP-NVUE */
-	/deep/
-	/* #endif */
-	.uni-input-placeholder {
-		font-size: 28rpx;
-	}
-
-	.list-info {
-		/* #ifndef APP-NVUE */
-		display: block;
-		/* #endif */
-		flex: 1;
-		text-align: center;
-		font-size: 26rpx;
-		color: #808080;
-		margin-top: 20rpx;
-	}
 </style>

pages/list/news-list.vue

@@ -6,12 +6,16 @@
 	uni-clientDB 组件文档：https://uniapp.dcloud.net.cn/uniCloud/uni-clientdb-component
 	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
 	 -->
-	<view style="overflow: hidden;">
-		<view class="search-container-bar">
-			<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText"
-				@search-click="searchClick" cancelButton="none" disabled />
+	<view style="overflow: hidden;">
+		<view class="search-box">
+			<status-bar></status-bar>
+			<view class="search-container-bar">
+				<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText"
+					@search-click="searchClick" cancelButton="none" disabled />
+			</view>
 		</view>
-		<view class="list">
+		<view class="list">
+			<status-bar></status-bar>
 			<!-- 刷新页面后的顶部提示框 -->
 			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->
 			<view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条内容</view>
@@ -56,8 +60,12 @@
 	</view>
 </template>
 
-<script>
+<script>
+	import statusBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue';
 	export default {
+		components:{
+			statusBar
+		},
 		props:{
 			searchText:{
 				type:String,
@@ -210,7 +218,7 @@
 
 	// 默认加入 scoped ，所以外面加一层提升权重
 	.list {
-		// margin-top: 52px;
+		margin-top: 52px;
 
 		.uni-list--waterfall {
 
@@ -247,6 +255,20 @@
 
 	.search-icons {
 		padding: 16rpx;
+	}
+	
+	.search-box{
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: fixed;
+		left: 0;
+		right: 0;
+		z-index: 10;
+		background-color: #fff;
 	}
 
 	.search-container-bar {
@@ -256,11 +278,6 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-		// position: fixed;
-		// left: 0;
-		// right: 0;
-		// z-index: 10;
-		background-color: #fff;
 	}
 
 	/* #ifndef APP-NVUE */

pages/list/news-search-title.vue

-<template>
-	<view>
-		<status-bar></status-bar>
-	</view>
-</template>
-
-<script>
-	import statusBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue';
-	export default {
-		components: {
-			statusBar
-		},
-	}
-</script>
-
-<style>
-</style>