触底加载

src/pages/home/fabricList.vue

 <template>
 	<view class="">
-		<u-navbar :is-back="true" :custom-back="backPush" :background="{ backgroundColor: '#F5F5F5' }" title="我的面料"></u-navbar>
+		<u-navbar :is-back="true" :custom-back="backPush" :background="{ backgroundColor: '#F5F5F5' }" title="我的面料">
+		</u-navbar>
 		<view class="content background_fff u-p-30">
 			<!-- 正文内容 -->
 			<u-sticky offset-top="15">
-				<u-search @search="searchCli" class="" bg-color="#fff" border-color="#ececec" placeholder="请输入面料名称" :show-action="false" v-model="search"></u-search>
+				<u-search @search="searchCli" class="" bg-color="#fff" border-color="#ececec" placeholder="请输入面料名称"
+					:show-action="false" v-model="search"></u-search>
 			</u-sticky>
 			<view>
 				<view class="u-m-t-30">
@@ -18,87 +20,106 @@
 </template>
 
 <script>
-import home from './mixin/index.js'
-import fabricTitle from "./components/fabricTitle.vue"
-export default {
-	mixins:[home],
-	components:{fabricTitle},
-	data() {
-		return {
-			size: 10,
-			search: '',
-			fiabricList: [],
-			// dataList:[],
-			total: 0
-		};
-	},
-	onLoad() {
-		this.materialList();
-	// 	this.$http("category.query", {}).then(res => {
-    //     let {
-    //       code,
-    //       data
-    //     } = res;
-    //     if (code === 200) {
-    //       this.dataList = data;
-
-    //     }
-    //   })
-	},
-	// 上拉加载更多
-	onReachBottom() {
-		// console,log("jiazai")
-		if (this.total > this.fiabricList.length) {
-			this.size = this.size + 5;
-			this.materialList();
-		}
-	},
-	methods: {
-		searchCli() {
-			// this.size = 5;
+	import home from './mixin/index.js'
+	import fabricTitle from "./components/fabricTitle.vue"
+	export default {
+		mixins: [home],
+		components: {
+			fabricTitle
+		},
+		data() {
+			return {
+				size: 10,
+				search: '',
+				fiabricList: [],
+				// dataList:[],
+				total: 0,
+				current: 1,
+				isLoad: false,
+			};
+		},
+		onLoad() {
 			this.materialList();
+			// 	this.$http("category.query", {}).then(res => {
+			//     let {
+			//       code,
+			//       data
+			//     } = res;
+			//     if (code === 200) {
+			//       this.dataList = data;
+
+			//     }
+			//   })
 		},
-		// 我的面料
-		materialList() {
-			// this.$http('orderTicket.materialList', {
-			// 	size: this.size,
-			// 	materialCode: '',
-			// 	materialName: this.search
-			// }).then(res => {
-			// 	let { code, data } = res;
-			// 	if (code == 200) {
-			// 		this.fiabricList = data.data;
-			// 		this.total = data.total;
-			// 	}
-			// });
-			this.$http('materialinfo.getMaterialList', {
-				size: this.size,
-				materialCode: '',
-				"current": 1,
-				"materialType": "面料",
-				codeAndName: this.search
-			}).then(res => {
-				let { code, data } = res;
-				if (code == 200) {
-					this.fiabricList = data.page.records;
-					this.total = data.page.total;
-				}
-			});
+		// 上拉加载更多
+		onReachBottom() {
+			// console,log("jiazai")
+			if (this.total > this.fiabricList.length) {
+				// this.size = this.size + 5;
+				this.current += 1
+				this.materialList();
+			}
 		},
-		backPush(){
-        this.$Router.push({
-          path: "/pages/home/index",
-          // query: {
-          //   id: this.id
-          // }
-        })
-      }
-	}
-};
+		methods: {
+			searchCli() {
+				// this.size = 5;
+				this.current = 1
+				this.isLoad = true
+				this.materialList();
+
+			},
+			// 我的面料
+			materialList() {
+				// this.$http('orderTicket.materialList', {
+				// 	size: this.size,
+				// 	materialCode: '',
+				// 	materialName: this.search
+				// }).then(res => {
+				// 	let { code, data } = res;
+				// 	if (code == 200) {
+				// 		this.fiabricList = data.data;
+				// 		this.total = data.total;
+				// 	}
+				// });
+				this.$http('materialinfo.getMaterialList', {
+					size: this.size,
+					materialCode: '',
+					"current": this.current,
+					"materialType": "面料",
+					codeAndName: this.search
+				}).then(res => {
+					let {
+						code,
+						data
+					} = res;
+					if (code == 200) {
+						// 搜索
+						if (this.isLoad) {
+							console.log("load")
+							this.fiabricList = []
+							this.fiabricList = data.page.records;
+							this.isLoad = false
+						} else {
+							this.fiabricList = this.fiabricList.concat(data.page.records);
+						}
+						this.total = data.page.total;
+					}
+				});
+			},
+			backPush() {
+				this.$Router.push({
+					path: "/pages/home/index",
+					// query: {
+					//   id: this.id
+					// }
+				})
+			}
+		}
+	};
 </script>
 
 <style scoped lang="scss">
-.background_fff {
-	background: #fff;
-}
-</style>
+	.background_fff {
+		background: #fff;
+	}
+</style>
\ No newline at end of file