触底加载

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,18 +20,22 @@
 </template>
 
 <script>
-import home from './mixin/index.js'
-import fabricTitle from "./components/fabricTitle.vue"
-export default {
-	mixins:[home],
-	components:{fabricTitle},
+	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
+				total: 0,
+				current: 1,
+				isLoad: false,
 			};
 		},
 		onLoad() {
@@ -49,14 +55,18 @@ export default {
 		onReachBottom() {
 			// console,log("jiazai")
 			if (this.total > this.fiabricList.length) {
-			this.size = this.size + 5;
+				// this.size = this.size + 5;
+				this.current += 1
 				this.materialList();
 			}
 		},
 		methods: {
 			searchCli() {
 				// this.size = 5;
+				this.current = 1
+				this.isLoad = true
 				this.materialList();
+
 			},
 			// 我的面料
 			materialList() {
@@ -74,18 +84,29 @@ export default {
 				this.$http('materialinfo.getMaterialList', {
 					size: this.size,
 					materialCode: '',
-				"current": 1,
+					"current": this.current,
 					"materialType": "面料",
 					codeAndName: this.search
 				}).then(res => {
-				let { code, data } = 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(){
+			backPush() {
 				this.$Router.push({
 					path: "/pages/home/index",
 					// query: {
@@ -94,11 +115,11 @@ export default {
 				})
 			}
 		}
-};
+	};
 </script>
 
 <style scoped lang="scss">
-.background_fff {
+	.background_fff {
 		background: #fff;
-}
+	}
 </style>
\ No newline at end of file