2024.7.16

2024-07-16 15:37:13 +08:00
parent 07c7562628
commit 46e91a1e89
19 changed files with 2397 additions and 387 deletions
--- a/pages/order_food/goodsList.vue
+++ b/pages/order_food/goodsList.vue
@@ -0,0 +1,92 @@
+<template>
+	<view>
+		<view class="t1">点击下方链接体验</view>
+		<navigator url="goodsList_scroll" hover-class="hover">
+			<view class="title">
+				<text>滚动式联动</text>
+				<text class="link">立即体验</text></view>
+			<view class="content">
+				<view>
+					优点：滚动流畅度很好，全平台兼容
+				</view>
+				<view>
+					缺点：因为需要计算高度的原因，需要在页面初始化时将所有商品信息返回，若是有大量的数据，不太建议这样做，会影响到打开时的加载速度
+				</view>
+			</view>
+		</navigator>
+		<navigator url="goodsList_swiper" hover-class="hover">
+			<view class="title">
+				<text>轮播式联动</text>
+				<text class="link">立即体验</text>
+			</view>
+			<view class="content">
+				<view>
+					优点：左侧导航与主内容区域联动性好且可以随意调整右侧内容的高度
+				</view>
+				<view>
+					缺点：因H5平台浏览器众多，体验欠佳，不建议在H5平台使用。
+					<text style="color: red;">双向联动有BUG，仅支持左侧联动</text>	
+				</view>
+			</view>
+		</navigator>
+		<view class="t2">
+			<view>因数据不可控的原因，请各位开发者们选择适合自己的模板使用，各有优缺点，选择适合自己的才是最好的。</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+.t1{
+	padding-top: 30rpx;
+	text-align: center;
+	font-size: 36rpx;
+	color: #e50000;
+}
+.t2{
+	padding: 30rpx;
+	font-size: 24rpx;
+	color: #ee0000;
+	
+	>view{
+		margin-bottom: 10rpx;
+	}
+}
+navigator{
+	font-size: 28rpx;
+	margin: 30rpx;
+	padding: 20rpx;
+	background-color: #fff;
+	border:#e5e5e5 solid 1px;
+	
+	.title{
+		padding-bottom: 20rpx;
+		margin-bottom: 20rpx;
+		border-bottom:#e5e5e5 solid 1px;
+		color:#333;
+		font-size: 32rpx;
+		
+		.link{
+			color: #09f;
+			float: right;
+		}
+	}
+	
+	.content{
+		line-height: 48rpx;
+		color:#999;
+	}
+}
+</style>