1

pages/home/index.vue

@@ -1,56 +1,59 @@
 <template>
 	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
-		<view class="main" id="top">
-			<view class="zero one">
-				<input type="text" placeholder="搜索商品">
-			</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" mode=""></image>
-					</swiper-item>
-				</swiper>
-			</view>
-			<view class="zero thr">
-				<view class="list" v-for="(item,index) in btnList" :key="index">
-					<image class="image" :src="item.url" mode=""></image>
-					<view class="textOver name">
-						{{item.name}}
-					</view>
+		<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="搜索商品">
 				</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">
-						<view class="title">
-							<text>{{tag.title||'&nbsp;'}}</text>
-						</view>
-						<image class="image" :src="tag.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" mode=""></image>
+						</swiper-item>
+					</swiper>
+				</view>
+				<view class="zero thr">
+					<view class="list" v-for="(item,index) in btnList" :key="index">
+						<image class="image" :src="item.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">
-					<image class="image" :src="item.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">
+							<view class="title">
+								<text>{{tag.title||'&nbsp;'}}</text>
+							</view>
+							<image class="image" :src="tag.url" mode=""></image>
+							<view class="textOver name">
+								{{tag.name}}
+							</view>
+						</view>
 					</view>
-					<view class="other">
-						<view class="money">
-							<text>¥</text><text>{{item.money}}</text>
+				</view>
+				<view class="zero five">
+					<view class="list" v-for="(item,index) in marketList" :key="index">
+						<image class="image" :src="item.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.money}}</text>
+							</view>
+							<view class="btn">
+								<button type="default" size="mini">购买</button>
+							</view>
 						</view>
 					</view>
 				</view>
 			</view>
-		</view>
-		<view class="backTop">
-			<text class="iconfont icon-fanhuidingbu"></text>
+		</scroll-view>
+
+		<view class="backTop" v-if="isShow==true">
+			<text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
 		</view>
 	</mobile-frame>
 </template>
@@ -213,7 +216,10 @@
 						name: '商品名称',
 						money: 10
 					},
-				]
+				],
+				// 是否显示返回顶部
+				isShow: false,
+				topItem: ''
 			};
 		},
 		onShow: function() {},
@@ -222,12 +228,28 @@
 				if (e && e.route) uni.redirectTo({
 					url: `/${e.route}`
 				})
+			},
+			// 计算高度
+			handleScroll(e) {
+				const that = this;
+				let scrollTop = e.detail.scrollTop;
+				that.isShow = scrollTop > 500;
+				that.topItem = '';
+			},
+			// 返回顶部
+			backTop() {
+				const that = this;
+				that.topItem = 'top'
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
+	.scrollView {
+		height: 100vh;
+	}
+
 	.main {
 		padding: 2vw;