列表及搜索页完成

pages.json

@@ -5,6 +5,12 @@
 				"navigationStyle": "custom",
 				"enablePullDownRefresh":true
 			}
+		},{
+			"path": "pages/list/news-list",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh":true
+			}
 		},
 		{
 			"path": "pages/grid/grid",
@@ -30,7 +36,7 @@
 		}, {
 			"path": "pages/search/search",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/list/detail",

pages/list/list.vue

 <template>
 	<view style="overflow: hidden;">
 		<!-- 页面主列表 -->
-		<news-list ref="newsList" :searchText="searchText"></news-list>
+		<news-list ref="newsList" :canSearch="canSearch" :currentText="searchText"></news-list>
 	</view>
 </template>
 
 <script>
 	import newsList from './news-list.vue';
-	import newsSearchTitle from './news-search-title.vue';
 	export default {
 		components:{
-			newsList,
-			newsSearchTitle
+			newsList
 		},
 		data() {
 			return {
 				searchText: '',
-				formData: {
-					waterfall: false, // 布局方向切换
-					status: 'loading', // 加载状态
-				},
+				canSearch:true
 			};
 		},
 		onShow(options) {

pages/list/news-list.vue

@@ -8,10 +8,9 @@
 	 -->
 	<view style="overflow: hidden;">
 		<view class="search-box">
-			<status-bar></status-bar>
+			<status-bar class="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 />
+				<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText" @click.native="searchClick" cancelButton="none" disabled />
 			</view>
 		</view>
 		<view class="list">
@@ -28,7 +27,7 @@
 				<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
 					<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
 					<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
-					<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
+					<uni-list-item :border="!options.waterfall" :to="'./detail?id='+item._id+'&title='+item.title" class="uni-list-item--waterfall" title="自定义商品列表"
 						v-for="item in data" :key="item._id">
 						<!-- 通过header插槽定义列表左侧图片 -->
 						<template v-slot:header>
@@ -67,14 +66,18 @@
 			statusBar
 		},
 		props:{
-			searchText:{
+			currentText:{
 				type:String,
 				default:''
+			},
+			canSearch:{
+				type:Boolean,
+				default:false
 			}
 		},
 		data() {
 			return {
-				// searchText: '',
+				searchText: this.currentText || '',
 				formData: {
 					waterfall: false, // 布局方向切换
 					status: 'loading', // 加载状态
@@ -87,6 +90,21 @@
 				tipShow: false // 是否显示顶部提示框
 			};
 		},
+		/**
+		 * 作为页面出现时的生命周期
+		 */
+		onShow(options) {
+			this.searchText = getApp().globalData.searchText;
+		},
+		/**
+		 * 下拉刷新回调函数
+		 */
+		onPullDownRefresh() {
+			this.refresh();
+		},
+		onReachBottom() {
+			this.loadMore();
+		},
 		methods: {
 			/**
 			 * 切换商品列表布局方向
@@ -120,15 +138,16 @@
 			},
 			searchClick() {
 				uni.hideKeyboard();
+				
+				
+				if(this.canSearch){
 					uni.navigateTo({
 						url: '/pages/search/search',
 						animationType: 'fade-in'
 					});
+				}else {
+					uni.navigateBack();
 				}
-		},
-		watch: {
-			searchText(value) {
-				this.search(value);
 			}
 		},
 		computed: {
@@ -278,6 +297,7 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
+		width: 750rpx;
 	}
 
 	/* #ifndef APP-NVUE */

pages/search/search.nvue

 <template>
 	<view class="container">
+		<view class="status-bar" :style="{height:statusBarHeight}"></view>
 		<view class="search-container">
 			<!-- 搜索框 -->
 			<view class="search-container-bar">
@@ -8,7 +9,7 @@
 				<!-- #endif -->
 				<!-- :cancelText="keyBoardPopup ? '取消' : '搜索'" -->
 				<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText" :focus="focus" :placeholder="hotWorld"
-				 clearButton="auto" cancelButton="always" @clear="clear" @confirm="confirm" @cancel="cancel" />
+				 clearButton="auto" cancelButton="always" @clear="clear" @confirm="confirm" @cancel="backPage" />
 			</view>
 		</view>
 		<view class="search-body">
@@ -61,7 +62,7 @@
 			</view>
 		</view>
 		<!-- 搜索联想 -->
-		<view class="search-associative" v-if="associativeShow">
+		<view class="search-associative" :style="{marginTop:statusBarHeight}" v-if="associativeShow">
 			<uni-list>
 				<template v-for="(item,index) in associativeList">
 					<uni-list-item :key="item._id" :ellipsis="1" :title="item.title" @click="associativeClick(item)" show-extra-icon
@@ -133,7 +134,7 @@
 			return {
 				mallGoodsDbName,
 				searchLogDbName,
-
+				statusBarHeight:'0px',
 				localSearchList: uni.getStorageSync(localSearchListKey),
 				localSearchListDel: false,
 				netHotListIsHide: false,
@@ -158,6 +159,9 @@
 
 			this.searchText = getApp().globalData.searchText;
 		},
+		onLoad() {
+			this.statusBarHeight = `${uni.getSystemInfoSync().statusBarHeight}px`;
+		},
 		methods: {
 			clear(res) {
 				console.log("res: ", res);
@@ -290,10 +294,12 @@
 			},
 			loadList(text = '') {
 				getApp().globalData.searchText = text;
-				// uni.navigateBack()
-				uni.switchTab({
-					url:'../list/list'
+				uni.navigateTo({
+					url:'../list/news-list'
 				})
+			},
+			backPage(){
+				uni.navigateBack();
 			}
 		},
 		computed: {
@@ -330,8 +336,11 @@
 <style lang="scss" scoped>
 	$search-bar-height:52px;
 	$word-container_header-height:72rpx;
-
+	.status-bar{
+		background-color: #fff;
+	}
 	.container {
+		padding-top: var(--status-bar-height);
 		/* #ifndef APP-NVUE */
 		height: 100%;
 		/* #endif */