1

components/mobile-frame/index.vue

@@ -1,8 +1,9 @@
 <template>
 	<view class="container body">
 		<view class="info">
-			<scroll-view scroll-y="true" class="scroll-view">
-				<view class="list-scroll-view">
+			<scroll-view class="scroll-view" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
+				@scroll="handleScroll">
+				<view class="list-scroll-view" id="top">
 					<slot></slot>
 				</view>
 			</scroll-view>
@@ -11,9 +12,13 @@
 			<view class="list" v-for="(item,index) in barList" :key="index" @tap="toPath(index,item)">
 				<image class="image" :src="item.normal" mode="" v-if="active!=index"></image>
 				<image class="image" :src="item.active" mode="" v-else></image>
-				<view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}</view>
+				<view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}
+				</view>
 			</view>
 		</view>
+		<view class="backTop" v-if="isShow==true">
+			<text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
+		</view>
 	</view>
 </template>
 
@@ -62,7 +67,10 @@
 						active: require('@/static/my_1.png'),
 						type: '0'
 					},
-				]
+				],
+				// 是否显示返回顶部
+				isShow: false,
+				topItem: '',
 			};
 		},
 		created: function() {
@@ -82,7 +90,19 @@
 				const that = this;
 				that.$set(that, `active`, index);
 				that.$emit('toPath', item)
-			}
+			},
+			// 计算高度
+			handleScroll(e) {
+				const that = this;
+				let scrollTop = e.detail.scrollTop;
+				that.isShow = scrollTop > 100;
+				that.topItem = '';
+			},
+			// 返回顶部
+			backTop() {
+				const that = this;
+				that.topItem = 'top'
+			},
 		}
 	}
 </script>
@@ -131,4 +151,16 @@
 			flex-direction: column;
 		}
 	}
+
+	.backTop {
+		position: fixed;
+		bottom: 20vw;
+		right: 5vw;
+
+		text {
+			font-size: 30px;
+			background-color: #0000005f;
+			border-radius: 90px;
+		}
+	}
 </style>

pages/home/index.vue

@@ -1,60 +1,62 @@
 <template>
 	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
-		<scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true" @scroll="handleScroll">
-			<view class="main" id="top">
-				<view class="zero one">
-					<input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')" placeholder-class="placss">
-				</view>
-				<view class="zero two">
-					<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
-						<swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
-							<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode=""></image>
-						</swiper-item>
-					</swiper>
-				</view>
-				<view class="zero thr">
-					<view class="list" v-for="(item,index) in btnList" :key="index" @tap="toIndexModel(item)">
-						<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode=""></image>
-						<view class="textOver name">
-							{{item.name}}
-						</view>
+		<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+			<view class="list-scroll-view">
+				<view class="main">
+					<view class="zero one">
+						<input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')"
+							placeholder-class="placss">
 					</view>
-				</view>
-				<view class="zero four">
-					<view class="recomList" v-for="(item,index) in recomList" :key="index">
-						<view class="list" v-for="(tag,indexs) in item.list" :key="indexs" @tap="toBuy(tag)">
-							<view class="title">
-								<text>{{tag.title||'&nbsp;'}}</text>
-							</view>
-							<image class="image" :src="tag.url&&tag.url.length>0?tag.url[0].url:''" mode=""></image>
+					<view class="zero two">
+						<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
+							indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
+							<swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
+								<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode="">
+								</image>
+							</swiper-item>
+						</swiper>
+					</view>
+					<view class="zero thr">
+						<view class="list" v-for="(item,index) in btnList" :key="index" @tap="toIndexModel(item)">
+							<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode=""></image>
 							<view class="textOver name">
-								{{tag.name}}
+								{{item.name}}
 							</view>
 						</view>
 					</view>
-				</view>
-				<view class="zero five">
-					<view class="list" v-for="(item,index) in marketList" :key="index" @tap="toBuy(item)">
-						<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode=""></image>
-						<view class="name">
-							{{item.name}}
+					<view class="zero four">
+						<view class="recomList" v-for="(item,index) in recomList" :key="index">
+							<view class="list" v-for="(tag,indexs) in item.list" :key="indexs" @tap="toBuy(tag)">
+								<view class="title">
+									<text>{{tag.title||'&nbsp;'}}</text>
+								</view>
+								<image class="image" :src="tag.url&&tag.url.length>0?tag.url[0].url:''" mode=""></image>
+								<view class="textOver name">
+									{{tag.name}}
+								</view>
+							</view>
 						</view>
-						<view class="other">
-							<view class="money">
-								<text>¥</text><text>{{item.sell_money||'暂无'}}</text>
+					</view>
+					<view class="zero five">
+						<view class="list" v-for="(item,index) in marketList" :key="index" @tap="toBuy(item)">
+							<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode="">
+							</image>
+							<view class="name">
+								{{item.name}}
 							</view>
-							<view class="btn">
-								<!-- <button type="default" size="mini">购买</button> -->
+							<view class="other">
+								<view class="money">
+									<text>¥</text><text>{{item.sell_money||'暂无'}}</text>
+								</view>
+								<view class="btn">
+									<!-- <button type="default" size="mini">购买</button> -->
+								</view>
 							</view>
 						</view>
 					</view>
 				</view>
 			</view>
 		</scroll-view>
-
-		<view class="backTop" v-if="isShow==true">
-			<text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
-		</view>
 	</mobile-frame>
 </template>
 
@@ -76,9 +78,10 @@
 				],
 				marketList: [ //商品列表
 				],
-				// 是否显示返回顶部
-				isShow: false,
-				topItem: '',
+				total: 0,
+				skip: 0,
+				limit: 5,
+				page: 0
 			};
 		},
 		onLoad: function() {
@@ -110,10 +113,13 @@
 				if (res.errcode == '0') that.$set(that, `recomList`, res.data);
 				// 首页产品列表
 				res = await that.$api(`/viewGoods/indexGoodsList`, `GET`, {
-					limit: 20
+					skip: that.skip,
+					limit: that.limit
 				});
 				if (res.errcode == '0') {
-					that.$set(that, `marketList`, res.data)
+					let list = [...that.marketList, ...res.data];
+					that.$set(that, `marketList`, list);
+					that.$set(that, `total`, res.total)
 				}
 			},
 			// 公共跳转
@@ -141,18 +147,6 @@
 					url: `/pagesHome/order/detail?id=${e.id||e._id}`
 				})
 			},
-			// 计算高度
-			handleScroll(e) {
-				const that = this;
-				let scrollTop = e.detail.scrollTop;
-				that.isShow = scrollTop > 500;
-				that.topItem = '';
-			},
-			// 返回顶部
-			backTop() {
-				const that = this;
-				that.topItem = 'top'
-			},
 			toPath(e) {
 				if (e && e.route && e.type == '0') {
 					uni.redirectTo({
@@ -164,15 +158,31 @@
 					})
 				}
 			},
+			// 分页
+			toPage(e) {
+				const that = this;
+				let list = that.marketList;
+				let limit = that.limit;
+				if (that.total > list.length) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+					let page = that.page + 1;
+					that.$set(that, `page`, page)
+					let skip = page * limit;
+					that.$set(that, `skip`, skip)
+					that.search();
+					uni.hideLoading();
+				} else uni.showToast({
+					title: '没有更多数据了'
+				});
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
-	.scrollView {
-		height: 100vh;
-	}
-
 	.main {
 		padding: 2vw;
 
@@ -349,15 +359,16 @@
 		}
 	}
 
-	.backTop {
-		position: fixed;
-		bottom: 20vw;
-		right: 5vw;
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
 
-		text {
-			font-size: 30px;
-			background-color: #0000005f;
-			border-radius: 90px;
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
 		}
 	}
 </style>