搜索框

components/mescroll-uni/components/mescroll-up.css

@@ -6,6 +6,14 @@
 	text-align: center;
 	clear: both;
 }
+.mescroll-upwarp-zero {
+	box-sizing: border-box;
+	min-height: 300rpx;
+	padding: 30rpx 0;
+	text-align: center;
+	clear: both;
+}
+
 
 /*提示文本 */
 .mescroll-upwarp .upwarp-tip,
@@ -15,6 +23,12 @@
 	vertical-align: middle;
 	/* color: gray; 已在style设置color,此处删去*/
 }
+.mescroll-upwarp .upwarp-prompt {
+	display: inline-block;
+	font-size: 28rpx;
+	vertical-align: middle;
+	/* color: gray; 已在style设置color,此处删去*/
+}
 
 .mescroll-upwarp .upwarp-tip {
 	margin-left: 16rpx;

components/mescroll-uni/mescroll-body.vue

@@ -33,7 +33,7 @@
       <view class="mescroll-upwarp--container">
         <!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
         <!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
-        <view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
+        <view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :class="upLoadType>0?'mescroll-upwarp':'mescroll-upwarp-zero'" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
           <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
           <view v-show="upLoadType===1">
             <view class="upwarp-progress mescroll-rotate" :style="{'border-color':mescroll.optUp.textColor}"></view>
@@ -41,6 +41,7 @@
           </view>
           <!-- 无数据 -->
           <view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
+          <view v-if="upLoadType===0" class="upwarp-prompt">{{ mescroll.optUp.textUpText }}</view>
         </view>
       </view>
       
@@ -84,6 +85,8 @@
 	import MeScroll from './mescroll-uni.js';
 	// 引入全局配置
 	import GlobalOption from './mescroll-uni-option.js';
+	// 引入 搜索 全局配置
+	import GlobalSearchOption from './mescroll-uni-option-search.js';
 	// 引入空布局组件
 	import MescrollEmpty from './components/mescroll-empty.vue';
 	// 引入回到顶部组件
@@ -119,6 +122,10 @@
 			bottom: [String, Number], // 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
 			safearea: Boolean, // bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
 			height: [String, Number], // 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
+      customType: {
+        type: [String, Number],
+        default: 0
+      }, // 自定义全局参数
 			bottombar:{ // 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效)
 				type: Boolean,
 				default: true
@@ -281,8 +288,11 @@
 					}
 				}
 			};
-
+      if (Number(this.customType) === 1) {
-			MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
+        MeScroll.extend(diyOption, GlobalSearchOption); // 混入搜索全局的配置
+      } else {
+        MeScroll.extend(diyOption, GlobalOption); // 混入全局的配置
+      }
 			let myOption = JSON.parse(JSON.stringify({down: vm.down,up: vm.up})); // 深拷贝,避免对props的影响
 			MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
 

components/mescroll-uni/mescroll-uni-option-search.js

@@ -0,0 +1,38 @@
+// 全局配置
+// mescroll-body 和 mescroll-uni 通用
+const GlobalOption = {
+    down: {
+        // 其他down的配置参数也可以写,这里只展示了常用的配置:
+        textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
+        textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
+        textLoading: '加载中 ...', // 加载中的提示文本
+        textSuccess: '加载成功', // 加载成功的文本
+        textErr: '加载失败', // 加载失败的文本
+        beforeEndDelay: 100, // 延时结束的时长 (显示加载成功/失败的时长)
+        offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
+        native: false // 是否使用系统自带的下拉刷新; 默认false; 仅在mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
+    },
+    up: {
+        // 其他up的配置参数也可以写,这里只展示了常用的配置:
+        textLoading: '加载中 ...', // 加载中的提示文本
+        textNoMore: '已经加载全部', // 没有更多数据的提示文本
+        textUpText: '向上滑动 加载更多', // 没有更多数据的提示文本
+        offset: 150, // 距底部多远时,触发upCallback,仅mescroll-uni生效 ( mescroll-body配置的是pages.json的 onReachBottomDistance )
+        toTop: {
+            // 回到顶部按钮,需配置src才显示
+            src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径 (建议放入static目录, 如 /static/img/mescroll-totop.png )
+            offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000px
+            right: 20, // 到右边的距离, 默认20 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
+            bottom: 120, // 到底部的距离, 默认120 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
+            width: 72 // 回到顶部图标的宽度, 默认72 (支持"20rpx", "20px", "20%"格式的值, 纯数字则默认单位rpx)
+        },
+        empty: {
+            use: true, // 是否显示空布局
+            // icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
+            icon: '/static/empty1.png',
+            tip: '搜索不到关键字结果' // 提示
+        }
+    }
+}
+
+export default GlobalOption

components/mescroll-uni/mescroll-uni-option.js

@@ -16,6 +16,7 @@ const GlobalOption = {
 		// 其他up的配置参数也可以写,这里只展示了常用的配置:
 		textLoading: '加载中 ...', // 加载中的提示文本
 		textNoMore: '亲, 没有更多了', // 没有更多数据的提示文本
+		textUpText: '向上滑动 加载更多', // 没有更多数据的提示文本
 		offset: 150, // 距底部多远时,触发upCallback,仅mescroll-uni生效 ( mescroll-body配置的是pages.json的 onReachBottomDistance )
 		toTop: {
 			// 回到顶部按钮,需配置src才显示

pages/search/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
+  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" customType="1" :up="upOption" @up="upCallback">
     <view class="search">
       <view class="search-wrapper">
         <view class="index-search">
@@ -131,9 +131,8 @@
         // 设置列表数据
         await app.getGoodsList(page.num)
             .then(list => {
-              console.log(list)
               const curPageLen = list.data.length
-              const totalSize = list.data.total
+              const totalSize = list.total
               app.mescroll.endBySize(curPageLen, totalSize)
             })
             .catch(() => app.mescroll.endErr())