Bläddra i källkod

放大镜iosbug修复,下拉触底分页加载

ming 3 år sedan
förälder
incheckning
b82d7ac2ff
3 ändrade filer med 115 tillägg och 43 borttagningar
  1. 4 2
      pages.json
  2. 46 8
      pages/siteArchive/siteArchive.vue
  3. 65 33
      pages/siteList/siteList.vue

+ 4 - 2
pages.json

@@ -42,7 +42,8 @@
 			"path": "pages/siteList/siteList",
 			"style": {
 				"navigationBarTitleText": "运行监测",
-				"enablePullDownRefresh": true
+				"enablePullDownRefresh": true,
+				"onReachBottomDistance":100 //距离底部多远时触发 单位px
 			}
 		},
 		{
@@ -357,7 +358,8 @@
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "现场档案",
-                "enablePullDownRefresh": false
+                "enablePullDownRefresh": false,
+				"onReachBottomDistance":100 //距离底部多远时触发 单位px
             }
             
         }

+ 46 - 8
pages/siteArchive/siteArchive.vue

@@ -21,7 +21,7 @@
 
 		<!-- 筛选框end -->
 
-		<view style="height: calc(100vh - 290rpx);overflow:scroll">
+		<view style="height: calc(100vh - 290rpx);">
 			<view class="cu-list menu-avatar">
 				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
 					v-for="(item,index) in siteArchiveData" :key="index" :data-target="'move-box-' + index"
@@ -45,12 +45,24 @@
 					</view>
 				</view>
 			</view>
+			<view v-if="!siteArchiveData.length&&siteListRes==1" class="text-center margin-top"> 暂无数据</view>
+			<view v-show="isLoadMore&&this.currentPage>1">
+				<uni-load-more :status="loadStatus"></uni-load-more>
+			</view>
 		</view>
 
 		<!-- 新增按钮start -->
-		<view class="plus">
-			<image src="../../static/plus.png" style="width:100rpx;height:100rpx" @tap="goAddPage()"></image>
+		<view style="width: 100%;
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    height: 64px;
+    background: #fff;">
+			<view class="plus">
+				<image src="../../static/plus.png" style="width:100rpx;height:100rpx" @tap="goAddPage()"></image>
+			</view>
 		</view>
+
 		<!-- 新增按钮end -->
 	</view>
 
@@ -63,15 +75,26 @@
 				modalName: null,
 				siteArchiveData: [],
 
-				siteName: ''
-
-
+				siteName: '',
+				siteListRes: 0,
 
+				currentPage: 1,
+				size: 10,
+				loadStatus: 'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
+				isLoadMore: false, //是否加载中
 			};
 		},
+
+		onReachBottom() { //上拉触底函数
+			if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
+				this.isLoadMore = true
+				this.currentPage += 1;
+				this.searchData()
+			}
+		},
 		onLoad: function(option) {
 
-			this.getDataList();
+			this.searchData();
 
 		},
 
@@ -80,6 +103,8 @@
 			searchData() {
 				this.getDataList({
 					"site_name": this.siteName,
+					currentPage: this.currentPage,
+					size: this.size,
 				})
 			},
 
@@ -105,7 +130,20 @@
 				})
 				console.log('res.data.data')
 				console.log(res.data.data)
-				this.siteArchiveData = res.data.data
+				this.siteListRes = 1;
+
+				if (res.data.total) {
+					this.siteArchiveData = this.siteArchiveData.concat(res.data.data)
+					if (res.data.data.length < this.size) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
+						this.isLoadMore = true
+						this.loadStatus = 'nomore'
+					} else {
+						this.isLoadMore = false
+					}
+				} else {
+					this.isLoadMore = true
+					this.loadStatus = 'nomore'
+				}
 			},
 
 			// 页面跳转

+ 65 - 33
pages/siteList/siteList.vue

@@ -9,37 +9,39 @@
 					<input name="siteName" v-model="formMess.siteName" @click="toggleShow" @focus="focusfns"
 						@input="handleInput()" placeholder="请输入或选择所属线路"></input>
 				</view>
-			
+
 			</view>
 			<view class="cu-bar search bg-gray filter-section">
 				<view class="search-form round bg-white">
 					<text class="cuIcon-search"></text>
-					<input class="" @focus="InputFocus" v-model="siteName" @blur="InputBlur" :adjust-position="false" type="text"
-					 placeholder="请输入站点名称"></input>
+					<input class="" @focus="InputFocus" v-model="siteName" @blur="InputBlur" :adjust-position="false"
+						type="text" placeholder="请输入站点名称"></input>
 				</view>
 				<view class="action">
 					<button class="cu-btn bg-blue round" @click="searchData()">查询</button>
 				</view>
-				
+
 			</view>
-			
+
 		</view>
 		<view class="siteItems" v-if="isShow2" style="max-height:60vh;overflow:auto;position:absolute;z-index:999; margin: 0 32rpx;
 		width: calc(100% - 64rpx);top:100rpx">
-				<view class=" site-item" v-if="!siteItemData.length">暂无结果</view>
-				<view class="site-item" v-for="(item,index) in siteItemData" @click="changeModel(item,index)" :key="index" style="padding:16rpx 22rpx">
-					{{item.route_name}}
-				</view>
+			<view class=" site-item" v-if="!siteItemData.length">暂无结果</view>
+			<view class="site-item" v-for="(item,index) in siteItemData" @click="changeModel(item,index)" :key="index"
+				style="padding:16rpx 22rpx">
+				{{item.route_name}}
 			</view>
+		</view>
 		<!-- 筛选框end -->
 
 
 		<!-- 站点列表start -->
 		<view class="site-items" style="margin-top: 0px">
 			<view class="cu-list menu-avatar longPressUl">
-				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in newSiteListData"
-				 :key="index" :data-target="'move-box-' + index">
-					<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon-alarm.png);"></view>
+				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
+					v-for="(item,index) in newSiteListData" :key="index" :data-target="'move-box-' + index">
+					<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon-alarm.png);">
+					</view>
 					<view class="content" @tap="goDeviceType(item)" @longpress="showDetail(item)">
 						<view class="text-grey site-tit">
 							<text style="width:350rpx;" class="inOneLine">{{item.siteName}}</text>
@@ -58,6 +60,9 @@
 			</view>
 
 			<view v-if="!siteListData.length&&siteListRes==1" class="text-center margin-top"> 暂无数据</view>
+			<view v-show="isLoadMore&&this.currentPage>1">
+				<uni-load-more :status="loadStatus"></uni-load-more>
+			</view>
 		</view>
 		<!-- 站点列表end -->
 
@@ -80,13 +85,18 @@
 				listTouchStart: 0,
 				listTouchDirection: null,
 				CustomBar: this.CustomBar,
-				
+
 				isShow2: false,
 				formMess: {
 					"siteName": "",
 				},
 				siteItemDataOrigin: [],
 				siteItemData: [],
+				
+				currentPage: 1,
+				size: 10,
+				loadStatus: 'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
+				isLoadMore: false, //是否加载中
 			};
 		},
 
@@ -104,7 +114,6 @@
 					return item
 				})
 			}
-
 		},
 
 
@@ -117,15 +126,21 @@
 				}
 			})
 		},
+
+		onReachBottom() { //上拉触底函数
+			if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
+				this.isLoadMore = true
+				this.currentPage += 1;
+				this.searchData()
+			}
+		},
 		onLoad() {
-			this.getSiteList();
+			this.searchData();
 			this.getRoutrBox()
 		},
 
 		methods: {
-			
-			
-			
+
 			//线路名称下拉数据请求
 			async getRoutrBox(params = {}) {
 				const res = await this.$myRequest({
@@ -135,7 +150,7 @@
 				})
 				// this.routeListData = res.data.data;
 				// console.log(this.routeListData)
-			
+
 				this.siteItemData = res.data.data;
 				this.siteItemDataOrigin = res.data.data;
 				this.siteItemData = this.siteItemDataOrigin;
@@ -145,7 +160,7 @@
 				this.isShow2 = false;
 				this.formMess.siteName = item.route_name;
 			},
-			
+
 			// 输入框点击 显示隐藏下拉框
 			toggleShow: function() {
 				this.isShow2 = !this.isShow2;
@@ -162,14 +177,17 @@
 				this.siteItemData = this.siteItemData.filter(item => item.route_name.indexOf(this.formMess.siteName) >
 					-1);
 			},
-			
-			
-			
-			
+
+
+
+
 			searchData() {
+				this.currentPage=1
 				this.getSiteList({
 					"siteName": this.siteName,
-					"route_name": this.formMess.siteName
+					"route_name": this.formMess.siteName,
+					currentPage: this.currentPage,
+					size: this.size,
 				})
 			},
 
@@ -181,8 +199,22 @@
 					data: ming
 				})
 				this.siteListRes = 1;
-				console.log(res.data.data)
-				this.siteListData = res.data.data
+				// this.siteListData = res.data.data
+
+				if (res.data.total) {
+					this.siteListData = this.siteListData.concat(res.data.data)
+					if (res.data.data.length < this.size) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
+						this.isLoadMore = true
+						this.loadStatus = 'nomore'
+					} else {
+						this.isLoadMore = false
+					}
+				} else {
+					this.isLoadMore = true
+					this.loadStatus = 'nomore'
+				}
+
+
 			},
 
 
@@ -251,13 +283,13 @@
 		-ms-user-select: none;
 		user-select: none;
 	}
+
 	input {
-		-webkit-touch-callout:initial !important;
-		-webkit-user-select:initial !important;
-		-khtml-user-select:initial !important;
-		-moz-user-select:initial !important;
-		-ms-user-select:initial !important;
+		-webkit-touch-callout: initial !important;
+		-webkit-user-select: initial !important;
+		-khtml-user-select: initial !important;
+		-moz-user-select: initial !important;
+		-ms-user-select: initial !important;
 		user-select: initial !important;
 	}
-	
 </style>