no message

pages/supply_chain/supply_chain.vue

@@ -26,13 +26,19 @@
     </view>
     <view class="setting-view">
       <view class="name-box">
-        <PingItem
-          @ok="onJumpShop"
-          style="margin-top: 24rpx"
-          :obj="item"
-          v-for="(item, index) in dataList"
-          :key="index"
-        ></PingItem>
+		<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption"
+			:down="downOption" @init="mescrollInit" :fixed="false">
+			<view class="mescrollUniView">
+				
+				<PingItem
+				  @ok="onJumpShop"
+				  style="margin-top: 24rpx"
+				  :obj="item"
+				  v-for="(item, index) in dataList"
+				  :key="index"
+				></PingItem>
+			</view>
+		</mescroll-uni>
       </view>
     </view>
     <!-- #ifndef H5 -->
@@ -50,45 +56,96 @@ import MyBtn from "@/components/common/my-btn.vue";
 import PingItem from "@/components/shop/ping-item.vue";
 import { searchList } from "@/api/product.js";
 import CustomTabBar from "@/components/custom-tab-bar.vue";
+import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
+	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
 
 export default {
-  components: { Header, TopSafe, MyBtn, PingItem,CustomTabBar },
+	mixins: [MescrollMixin],
+  components: { Header, TopSafe, MyBtn, PingItem,CustomTabBar,MescrollUni },
   data() {
     return {
       dataList: [],
       tabList: [{name:'全部'}],
       curTab: 0,
+	  upOption: {
+	  	auto: false,
+	  	page: {
+	  		size: 10 // 每页数据的数量,默认10
+	  	},
+	  	noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
+	  	empty: {
+	  		tip: `空空如也`
+	  	},
+	  	textColor: '#333',
+	  	bgColor: 'rgba(0,0,0,0)',
+	  },
+	  downOption: {
+	  	auto: false,
+	  	textColor: '#333',
+	  	bgColor: 'rgba(0,0,0,0)',
+	  
+	  },
     };
   },
-  onShow() {},
   onLoad() {
     this.init();
   },
   methods: {
+	  mescrollInit(mescroll) {
+	  	this.mescroll = mescroll;
+	  },
+	  upCallback(page) {
+	  	let pageNum = page.num;
+	  	let pageSize = page.size;
+	  
+	  
+	  	const params = {
+	  	  type: 2,
+	  	  page: page.num,
+	  	  pageSize: page.size,
+	  	  isPar: true,
+	  	};
+	 
+	  	searchList(params).then(res => {
+	  
+	  		let curPageLen = res.data.length;
+	  		if (page.num === 1) this.dataList = [];
+	  		this.dataList = this.dataList.concat(res.data);
+	  		
+	  		this.mescroll.endBySize(curPageLen, res.data.total);
+	  	})
+	  	// this.mescroll.endBySize(1, 1);
+	  },
+	  downCallback() {
+	  	this.$nextTick(function() {
+	  		this.mescroll && this.mescroll.resetUpScroll();
+	  	})
+	  },
     async cascadeCategory() {
       getCascadeCategory({ parentId: 0 }).then((res) => {
         if (res && res.bizcode === 100) {
 		  res.data.forEach(item=>{
 			  this.tabList.push(item);
 		  })
-          this.getSearchList();
+          this.downCallback();
         }
       });
     },
     onTab(index) {
       if (index != this.curTab) {
-        this.curTab = index;
-        this.getSearchList();
+        this.curTab = index;    
+		  this.dataList = [];
+		this.downCallback();
       }
     },
     init() {
-      this.cascadeCategory();
+		this.cascadeCategory();
     },
     async getSearchList() {
       const params = {
         type: 2,
         page: 1,
-        pageSize: 99,
+        pageSize: 10,
         isPar: true,
       };
 	  if(this.curTab != 0){
@@ -120,8 +177,9 @@ export default {
 
 <style lang="scss" scoped>
 .content-two {
-  height: calc(100vh - env(safe-area-inset-bottom));
-  overflow: auto;
+  
+  height: calc(100vh );
+  
   background-color: $app-bj;
 }
 .head-view {
@@ -172,7 +230,7 @@ export default {
 }
 .setting-view {
   width: 100%;
-    height: calc(100% - 88rpx - 80rpx);
+	height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
 
   display: flex;
   flex-direction: column;
@@ -183,15 +241,17 @@ export default {
   position: relative;
   .name-box {
     width: 100%;
-    border-radius: 16rpx;
-    height: 100%;
-    overflow-y: auto;
+    height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
+    flex-direction: column;
+    align-items: center;
 
-    box-sizing: border-box;
+	.mescrollUniView{
+		width: calc(100vw - 48rpx);
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
   }
 }
 </style>