浏览代码

分页处理

lilei 10 月之前
父节点
当前提交
d3bc20ce47
共有 4 个文件被更改,包括 158 次插入45 次删除
  1. 45 0
      components/uni-pages-nav/uni-pages-nav.vue
  2. 0 11
      pages.json
  3. 50 4
      pagesB/promoDetail.vue
  4. 63 30
      pagesB/promoProduct.vue

+ 45 - 0
components/uni-pages-nav/uni-pages-nav.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="pagination">
+    <u-button size="mini" shape="circle" @click="goToPage(currentPage - 1)" :disabled="currentPage <= 1">上一页</u-button>
+    <text>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
+    <u-button size="mini" shape="circle" @click="goToPage(currentPage + 1)" :disabled="currentPage >= totalPages">下一页</u-button>
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: 'UniPagesNav',
+  props: {
+    currentPage: {
+      type: Number,
+      required: true
+    },
+    totalPages: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    goToPage(page) {
+      if (page >= 1 && page <= this.totalPages) {
+        this.$emit('pagechanged', page);
+      }
+    }
+  }
+}
+</script>
+ 
+<style scoped>
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  padding: 20rpx;
+  border-radius: 20rpx;
+  box-shadow: 1px 1px 5px #eee;
+}
+.pagination text {
+  margin: 0 10px;
+}
+</style>

+ 0 - 11
pages.json

@@ -429,17 +429,6 @@
 				"bounce":"none"
 				"bounce":"none"
 			}
 			}
 		},
 		},
-		{
-			"path" : "promoProduct",
-			"style" : 
-			{
-				"navigationBarTitleText" : "促销产品列表",
-				"enablePullDownRefresh": false,
-				"titleView":false,
-				// 将回弹属性关掉
-				"bounce":"none"
-			}
-		},
 		{
 		{
 			"path" : "coupon",
 			"path" : "coupon",
 			"style" : 
 			"style" : 

+ 50 - 4
pagesB/promoDetail.vue

@@ -58,6 +58,10 @@
 				<view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
 				<view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
 			</view>
 			</view>
 		</view>
 		</view>
+		<!-- 分页 -->
+		<view class="pages-box" v-if="showPage">
+			<uni-pages-nav :totalPages="totalPages" :currentPage="pageNo" @pagechanged="pagechanged"></uni-pages-nav>
+		</view>
 		<!-- 已选列表 -->
 		<!-- 已选列表 -->
 		<page-container 
 		<page-container 
 		:show="showChoosePopu" 
 		:show="showChoosePopu" 
@@ -146,7 +150,10 @@
 				choosePageSize: 4, // 已选产品每页数
 				choosePageSize: 4, // 已选产品每页数
 				chooseTotal: 0 ,// 已选产品总记录数
 				chooseTotal: 0 ,// 已选产品总记录数
 				promoActiveSn: null, // 活动sn
 				promoActiveSn: null, // 活动sn
-				submitOk: false
+				submitOk: false,
+				// 分页
+				showPage: false,
+				maxScrollTop: 0
 			}
 			}
 		},
 		},
 		computed: {
 		computed: {
@@ -173,6 +180,10 @@
 					total = total + key.qty
 					total = total + key.qty
 				})
 				})
 				return total
 				return total
+			},
+			// 总页数
+			totalPages(){
+				return Math.ceil(this.total / this.pageSize)
 			}
 			}
 		},
 		},
 		onLoad(opts) {
 		onLoad(opts) {
@@ -207,14 +218,32 @@
 		},
 		},
 		// 到底部加载更多
 		// 到底部加载更多
 		onReachBottom() {
 		onReachBottom() {
+			this.showPage = true
 			if(this.list.length < this.total){
 			if(this.list.length < this.total){
-				this.pageNo += 1
-				this.getRow()
+				// this.pageNo += 1
+				// this.getRow()
 			}else{
 			}else{
 				this.status = "nomore"
 				this.status = "nomore"
 			}
 			}
 		},
 		},
+		onPageScroll(e){
+			if(this.showPage && this.maxScrollTop == 0){
+				this.maxScrollTop = e.scrollTop
+			}
+			// console.log(this.maxScrollTop , e.scrollTop)
+			if(this.showPage && this.maxScrollTop>0 && (e.scrollTop < 50)){
+				this.showPage = false
+			}
+			// 最后一页显示
+			if(this.pageNo >= this.totalPages){
+				this.showPage = true
+			}
+		},
 		methods: {
 		methods: {
+			pagechanged(page){
+				this.pageNo = page
+				this.getRow()
+			},
 			// 初始化页面
 			// 初始化页面
 			pageInit(){
 			pageInit(){
 				// 重置分页
 				// 重置分页
@@ -419,13 +448,20 @@
 					  })
 					  })
 				  })
 				  })
 				  
 				  
-				  _this.list = _this.list.concat(ret)
+				  // _this.list = _this.list.concat(ret)
+				  _this.list = ret
 				  _this.total = res.data.count || 0
 				  _this.total = res.data.count || 0
 				} else {
 				} else {
 				  _this.list = []
 				  _this.list = []
 				  _this.total = 0
 				  _this.total = 0
 				  _this.noDataText = res.message
 				  _this.noDataText = res.message
 				}
 				}
+				// 滚动到顶部
+				_this.showPage = false
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 300
+				});
 				_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
 				_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
 			  })
 			  })
 			},
 			},
@@ -474,6 +510,16 @@
 <style lang="less">
 <style lang="less">
     page{
     page{
 		height: 100vh;
 		height: 100vh;
+		.pages-box{
+			position: fixed;
+			left: 10%;
+			bottom: 140rpx;
+			z-index: 90;
+			width: 80%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
 	}
 	}
 	.video-pagesCons{
 	.video-pagesCons{
 		height: 100vh;
 		height: 100vh;

+ 63 - 30
pagesB/promoProduct.vue

@@ -1,7 +1,20 @@
 <template>
 <template>
-	  <view class="content">
-		   
-	  </view>
+	   <view class="content">
+	       <mosowe-invented-list
+	         :list="list"
+	         :cacheNum="30">
+	         <template #default="{ item }">
+	           <view class="item">
+	             <view class="name">
+	               {{ item.list[0].productName }}
+	             </view>
+	             <view class="age">
+	               {{ item.list[0].productCode }}
+	             </view>
+	           </view>
+	         </template>
+	       </mosowe-invented-list>
+	     </view>
 </template>
 </template>
 
 
 <script>
 <script>
@@ -10,31 +23,38 @@
 	export default {
 	export default {
 	        data() {
 	        data() {
 	            return {
 	            return {
-					extraData:{
-						id: 'promoProductList',
-						// 添加产品
-						chooseProduct:(item)=>{
-							this.chooseProduct(item)
-						}
-					},
 					promoActiveSn: null,
 					promoActiveSn: null,
 					chooseList: [],
 					chooseList: [],
-					screenWidth: 0,
+					windowWidth: 0,
+					windowHeight: 0,
 					showChoosePopu: false,
 					showChoosePopu: false,
-					queryWord: ''
+					queryWord: '',
+					ctxScroll: null,
+					trigger: false,
+					loading: false,
+					over: false,
+					// 列表数据
+					pageNo: 1,
+					pageSize: 200,
+					list: [],
 	            };
 	            };
 	        },
 	        },
 			onLoad(opts) {
 			onLoad(opts) {
 				 uni.setNavigationBarTitle({
 				 uni.setNavigationBarTitle({
 				 	title: opts.title||'促销活动产品'
 				 	title: opts.title||'促销活动产品'
 				 })
 				 })
-				 this.screenWidth = uni.getSystemInfoSync().windowWidth
+				 this.windowWidth = uni.getSystemInfoSync().windowWidth
+				 this.windowHeight = uni.getSystemInfoSync().windowHeight
+				 // 初始化数据
 				 this.$store.state.vuex_tempData = null
 				 this.$store.state.vuex_tempData = null
 				 this.promoActiveSn = opts.promoActiveSn
 				 this.promoActiveSn = opts.promoActiveSn
 				 // 购物车是否有缓存
 				 // 购物车是否有缓存
 				 const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
 				 const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
 				 this.chooseList = cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
 				 this.chooseList = cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
 			},
 			},
+			onReady() {
+				this.loadData()
+			},
 			onShow() {
 			onShow() {
 				this.showChoosePopu=false
 				this.showChoosePopu=false
 			},
 			},
@@ -47,23 +67,17 @@
 					this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
 					this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
 				}
 				}
 				this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
 				this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
-				
 				// 清空数据
 				// 清空数据
 				this.chooseList = null
 				this.chooseList = null
 			},
 			},
 	        methods: {
 	        methods: {
-				// 查询列表
-				searchList(){
-					this.$refs.paging.reload()
-				},
-				// @query所绑定的方法不要自己调用!!需要刷新列表数据时,只需要调用this.$refs.paging.reload()即可
-	            getRow(pageNo, pageSize) {
-					console.log('pageNo',pageNo)
-					console.log('pageSize',pageSize)
-					let _this = this
+				// 加载数据
+	            loadData() {
+					console.log('pageNo',this.pageNo)
+					console.log('pageSize',this.pageSize)
 					let params = {
 					let params = {
-					  pageNo: pageNo,
-					  pageSize: pageSize,
+					  pageNo: this.pageNo,
+					  pageSize: this.pageSize,
 					  queryWord: this.queryWord,
 					  queryWord: this.queryWord,
 					  promoActiveSn: this.promoActiveSn
 					  promoActiveSn: this.promoActiveSn
 					}
 					}
@@ -86,7 +100,8 @@
 								  ret.push({list:[this.formatData(a,hasAChecked)]})
 								  ret.push({list:[this.formatData(a,hasAChecked)]})
 							  }
 							  }
 						  }
 						  }
-						  _this.$refs.paging.complete(ret);
+						  this.total = (res.data.count || 0) + 1
+						  this.list = this.list.concat(ret)
 						} 
 						} 
 					})
 					})
 	            },
 	            },
@@ -118,12 +133,30 @@
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-.content{
-	width: 100%;
-	height: 100vh;
-}
 .tab-search{
 .tab-search{
 	padding: 15rpx 20rpx;
 	padding: 15rpx 20rpx;
 	background: #fff;
 	background: #fff;
 }
 }
+.content {
+  width: 100vw;
+  height: 100vh;
+  .name {
+    font-size: 32rpx;
+    font-weight: bold;
+    line-height: 40rpx;
+    margin-bottom: 20rpx;
+    color: #333;
+  }
+  .age {
+    font-size: 24rpx;
+    color: #999;
+  }
+  .item {
+    margin: 30rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+    background-color: #eee;
+    border-radius: 12rpx;
+  }
+}
 </style>
 </style>