uni-app仿饿了么点餐界面 左右菜单联动 滚动时商家信息、广告吸顶、弹窗下滑动关闭

最新推荐文章于 2024-05-09 16:29:33 发布
置顶 最新推荐文章于 2024-05-09 16:29:33 发布
阅读量2.3k 收藏 25
点赞数 4
分类专栏： uni-app 文章标签： uni-app 5G vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30675311/article/details/128970541
版权

1、代码如下:

<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="nav_bar" :style="{'height':statusBarHeight + 'px','backgroundColor':backgroundColor}">
			<view class="state_height"></view>
			<view class="nav_bar_inner" :style="{'height': statusBarHeight / 2 + 'px'}">
				<u-icon :name="backIcon" :color="backIconColor" size="20" @click="onBack()"></u-icon>
				<view class="">
				</view>
			</view>
		</view>
		<!-- 顶部区域背景 -->
		<view class="top_area area_height" data-type="1">

		</view>
		<!-- tab切换 -->
		<view class="tabs area_height" data-type="2" :style="{'top':statusBarHeight + 'px'}">
			<u-tabs :list="list4" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;" @change="onChangeTab">
			</u-tabs>
		</view>

		<template v-if="tabIndex == 0">
			<!-- 广告位置 -->
			<view class="advert_area area_height" data-type="1">
				<view class="img_box">
					<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/swiper/swiper3.png" width="100%"
						height="80px" :radius="10"></u--image>
				</view>
			</view>

			<!-- 菜品区域 -->
			<view class="cate_content">
				<scroll-view scroll-y="true" :scroll-top="leftScrollTop" class="left"
					:style="{'height':scrollHeight + 'px','top':stickyTop + 'px'}">
					<view class="">
						<view class="menu_name" :id="'menu_name' + index"
							:class="{'menu_name_active':currentIndex == index}" v-for="(item,index) in productList"
							@click="onChangeCate(item,index)" :key="index">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="right">
					<view class="item" v-for="(item,index) in productList" :key="index">
						<view class="title sticky_title" :style="{'top': stickyTop + 'px'}">
							{{item.name}}
						</view>
						<view class="content">
							<view class="product_item" v-for="(cell,cIndex) in item.list" :key="cIndex">
								<image :src="cell.img" mode="aspectFill" class="product_img"></image>
								<view class="prodcut_info">
									<view class="name">
										{{cell.name}}
									</view>
									<view class="price">
										￥{{cell.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 评论 -->
		<view class="" v-if="tabIndex == 1">

		</view>
		<!-- 商家信息 -->
		<view class="" v-if="tabIndex == 2">

		</view>


		<!-- 底部区域 -->
		<view class="foot">
			<view class="inner">
				<view class="icon_box" @click="onShowCart()">
					<u-icon name="shopping-cart" color="#e93323" size="32"></u-icon>
				</view>
				<view class="">
					<u-button text="去结算" type="primary" iconColor="#e93323" shape="circle" :customStyle="{
						width:'120px',
						backgroundColor:'#e93323',
						borderColor:'#e93323'
					}"></u-button>
				</view>
			</view>
		</view>
		<!-- 购物车弹窗 -->
		<slide-popup ref="slide_cart" :showClose="false">
			<view class="cart_list">
				<view class="cart_item" v-for="(item,index) in 20" :key="index">
					{{index}}
				</view>
			</view>
		</slide-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight, //窗口高度
				scrollHeight: uni.getSystemInfoSync().windowHeight, //滚动高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 44, //顶部导航高度
				backgroundColor: "rgba(255,255,255,0)",
				backIconColor: "#fff", //返回图标颜色
				backIcon: "arrow-left", //home arrow-left //返回图标样式
				allAreaHeight: 0, //顶部的总区域高度
				topList: [], //
				currentIndex: 0,
				leftScrollTop: 0,
				rightItemHeight: 0,
				stickyTop: 0, //吸顶的距离
				productList: [{
						name: "中餐",
						id: "1",
						icon: "",
						list: [{
								name: "七味盐黄金豆腐",
								img: "https://qcloud.dpfile.com/pc/wU3rvxK40IRQSH-ME1GftzbPAzUEH2TKcu_Umu2cXIBUnUZhRs1BQ-3fNG1nS2hQ5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 188,
							},
							{
								name: "龙井凤尾虾仁",
								img: "https://qcloud.dpfile.com/pc/oUbzBcAwYHbcXkxpAKlEs-C8fJQSNvsbJU8yORW5Ev8LwkSAC8kXSFYMi29l17Qs5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶饼",
								img: "https://qcloud.dpfile.com/pc/BDNSIx7XBHIm2AZ-68Yq8CsI0vGyA_Bjnzl6bPXAAqciRqcwCz8FTdU3fU3gYaOR5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 18,
							}
						],
					},
					{
						name: "西餐",
						id: "2",
						icon: "",
						list: [{
								name: "绿茶烤鸡",
								img: "https://qcloud.dpfile.com/pc/qnYmJT9l5QbBNCNfezzLojGCAHfoE6xmprOQlvoyvpiwK8Lj0colHBWeX6r06i-Y5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 36,
							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							}
						],
					},
					{
						name: "中餐",
						id: "1",
						icon: "",
						list: [{
								name: "七味盐黄金豆腐",
								img: "https://qcloud.dpfile.com/pc/wU3rvxK40IRQSH-ME1GftzbPAzUEH2TKcu_Umu2cXIBUnUZhRs1BQ-3fNG1nS2hQ5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 188,
							},
							{
								name: "龙井凤尾虾仁",
								img: "https://qcloud.dpfile.com/pc/oUbzBcAwYHbcXkxpAKlEs-C8fJQSNvsbJU8yORW5Ev8LwkSAC8kXSFYMi29l17Qs5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶饼",
								img: "https://qcloud.dpfile.com/pc/BDNSIx7XBHIm2AZ-68Yq8CsI0vGyA_Bjnzl6bPXAAqciRqcwCz8FTdU3fU3gYaOR5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 18,
							}
						],
					},
					{
						name: "西餐",
						id: "2",
						icon: "",
						list: [{
								name: "绿茶烤鸡",
								img: "https://qcloud.dpfile.com/pc/qnYmJT9l5QbBNCNfezzLojGCAHfoE6xmprOQlvoyvpiwK8Lj0colHBWeX6r06i-Y5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 36,
							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							}
						],
					},
					{
						name: "中餐",
						id: "1",
						icon: "",
						list: [{
								name: "七味盐黄金豆腐",
								img: "https://qcloud.dpfile.com/pc/wU3rvxK40IRQSH-ME1GftzbPAzUEH2TKcu_Umu2cXIBUnUZhRs1BQ-3fNG1nS2hQ5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 188,
							},
							{
								name: "龙井凤尾虾仁",
								img: "https://qcloud.dpfile.com/pc/oUbzBcAwYHbcXkxpAKlEs-C8fJQSNvsbJU8yORW5Ev8LwkSAC8kXSFYMi29l17Qs5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶饼",
								img: "https://qcloud.dpfile.com/pc/BDNSIx7XBHIm2AZ-68Yq8CsI0vGyA_Bjnzl6bPXAAqciRqcwCz8FTdU3fU3gYaOR5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 18,
							}
						],
					},
					{
						name: "西餐",
						id: "2",
						icon: "",
						list: [{
								name: "绿茶烤鸡",
								img: "https://qcloud.dpfile.com/pc/qnYmJT9l5QbBNCNfezzLojGCAHfoE6xmprOQlvoyvpiwK8Lj0colHBWeX6r06i-Y5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 36,
							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							}
						],
					},
					{
						name: "中餐",
						id: "1",
						icon: "",
						list: [{
								name: "七味盐黄金豆腐",
								img: "https://qcloud.dpfile.com/pc/wU3rvxK40IRQSH-ME1GftzbPAzUEH2TKcu_Umu2cXIBUnUZhRs1BQ-3fNG1nS2hQ5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 188,
							},
							{
								name: "龙井凤尾虾仁",
								img: "https://qcloud.dpfile.com/pc/oUbzBcAwYHbcXkxpAKlEs-C8fJQSNvsbJU8yORW5Ev8LwkSAC8kXSFYMi29l17Qs5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶饼",
								img: "https://qcloud.dpfile.com/pc/BDNSIx7XBHIm2AZ-68Yq8CsI0vGyA_Bjnzl6bPXAAqciRqcwCz8FTdU3fU3gYaOR5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 18,
							}
						],
					},
					{
						name: "西餐",
						id: "2",
						icon: "",
						list: [{
								name: "绿茶烤鸡",
								img: "https://qcloud.dpfile.com/pc/qnYmJT9l5QbBNCNfezzLojGCAHfoE6xmprOQlvoyvpiwK8Lj0colHBWeX6r06i-Y5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 36,
							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							},
							{
								name: "石锅鸡汤",
								img: "https://qcloud.dpfile.com/pc/eK-lcbiSwCMfuurDzas6sDXooZ-820qyij7E-_2Guvl3SQvBEuZcM3cJ5XDTpMvP5g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 58,
							},
							{
								name: "绿茶葱香",
								img: "https://qcloud.dpfile.com/pc/8To1nn0bLS0Z8UXhWs7d_6_4hgdHYJDB9PY0bTHn51l0M4tvZgWeKDKSXjsROSf95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 48,
							},
							{
								name: "面包诱惑",
								img: "https://qcloud.dpfile.com/pc/S1Yt03ZHevIEbvb3fhAy67V74qWD5ZJURHvRhFUOlP2YaCqE8KEE8D3jXlKeA1a95g_3Oo7Z9EXqcoVvW9arsw.jpg",
								price: 32,

							}
						],
					}
				],
				list4: [{
					name: '点餐'
				}, {
					name: '评论',
				}, {
					name: '商家',
				}],
				lineBg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=",
				tabIndex: 0,
				isClick: false,
			}
		},
		onPageScroll(e) {
			let opacity = (e.scrollTop / 100).toFixed(2);
			this.backgroundColor = "rgba(255,255,255," + (opacity >= 1 ? 1 : opacity) + ")";
			this.backIconColor = opacity >= 1 ? "#000" : "#fff";

			uni.setNavigationBarColor({
				frontColor: opacity >= 1 ? "#000000" : "#ffffff",
				backgroundColor: opacity >= 1 ? "#ffffff" : "#000000",
			})
			if (!this.isClick) {
				let scrollTop = parseInt(e.scrollTop);
				for (var i = 0; i < this.topList.length; i++) {
					if (scrollTop >= this.topList[i].top && scrollTop <= this.topList[i].bottom) {
						this.currentIndex = i;
						this.leftScrollTop = this.rightItemHeight * i;
						break;
					}
				}
			}

		},
		onLoad() {

			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.area_height').boundingClientRect(data => {
					if (data) {
						this.allAreaHeight = 0; //需要减去的区域高度
						let addHeight = 0; //不需要减去的总高度
						for (var i = 0; i < data.length; i++) {
							if (data[i].dataset.type == '1') { // type = 1 是需要减去的区域  type = 2 是不需要减去的区域
								this.allAreaHeight += data[i].height; //计算顶部总区域高度
							} else {
								addHeight += data[i].height;
							}
						}
						//左侧菜单可滚动的高度 = 屏幕窗口总高度 - 需要减去的区域高度 + 不需要减去的区域高度 + 18;
						this.scrollHeight = this.windowHeight - this.allAreaHeight + addHeight + 18;
					}
				}).exec();

				//自定义顶部导航的时候 计算吸顶的距离
				query.select('.tabs').boundingClientRect(data => {
					if (data) {
						//吸顶距离 = 顶部标题栏高度与状态栏高度之和 + 需要吸顶的元素本身的高度
						this.stickyTop = this.statusBarHeight + data.height;
					}
				}).exec();

				this.getTop();
			})

			if (getCurrentPages().length == 1) {
				this.backIcon = "home";
			} else {
				this.backIcon = "arrow-left";
			}

		},
		methods: {
			/**
			 * 返回上一级
			 */
			onBack() {
				if (getCurrentPages().length == 1) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.navigateBack();
				}
			},
			/**
			 * 获取右边内容距离顶部的距离
			 */
			getTop() {

				const query = uni.createSelectorQuery().in(this);
				query.select('.menu_name').boundingClientRect().selectAll('.item').boundingClientRect().exec(data => {
					if (data) {
						this.rightItemHeight = data[0].height; //获取左侧的第一个菜单的高度
						data[1].map((item, index) => {
							this.topList.push({
								top: parseInt(item.top - this.stickyTop),
								bottom: parseInt(item.bottom - this.stickyTop),
							});
						})
					}
				});

			},
			/**
			 * @param {Object} item
			 * @param {Object} index
			 * 点击商品分类
			 */
			onChangeCate(item, index) {
				if (this.currentIndex == index) {
					return;
				}
				this.isClick = true;
				this.currentIndex = index;
				this.leftScrollTop = this.rightItemHeight * index;
				uni.pageScrollTo({
					scrollTop: this.topList[index].top,

				})
				setTimeout(() => {
					this.isClick = false;
				}, 600)
			},
			/**
			 * 显示购物车弹窗
			 */
			onShowCart() {
				this.$refs.slide_cart.open();
			},
			/**
			 * @param {Object} data
			 * 点击切换tab
			 */
			onChangeTab(data) {
				this.tabIndex = data.index;
			},

		}
	}
</script>
<style>
	page {
		height: auto;
	}
</style>
<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.state_height {
		height: var(--status-bar-height);
	}

	.page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.nav_bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0);
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.nav_bar_inner {
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			justify-content: space-between;
		}
	}

	.top_area {
		height: 380rpx;
		background-color: #fff;
		background-image: url('https://cdn.uviewui.com/uview/swiper/swiper1.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.advert_area {
		height: 200rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.img_box {
			width: 94%;
		}
	}

	.tabs {
		position: sticky;
		top: 0;
		height: 100rpx;
		background: #fff;
		box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.2);
		z-index: 999;
	}

	.swiper_wrap {}

	.cate_content {
		/* 	position: sticky;
		top: 100rpx; */
		display: flex;
		flex-direction: row;

		.left {
			position: sticky;
			top: 100rpx;
			width: 200rpx;
			background: #fff;
			// border: 1px solid red;

			.menu_name {
				/* 	position: sticky;
				top: 0; */
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #8d8d8d;

			}

			.menu_name_active {
				background: #f5f5f5;
				color: #333;
			}
		}

		.right {
			flex: 1;
			min-height: 100rpx;
			background: #f5f5f5;
			padding: 0 20rpx;

			.item {
				border-bottom: 1px solid #eee;
				background: #fff;

				.title {
					position: sticky;
					top: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #fff;
					padding-left: 20rpx;
				}

				.product_item {
					height: 120rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					padding: 0 20rpx;

					.product_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 6rpx;
					}

					.prodcut_info {
						flex: 1;
						padding-left: 20rpx;
					}
				}
			}
		}
	}

	.foot {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		min-height: 100rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		box-shadow: 0 -4px 10px -3px rgba(0, 0, 0, 0.2);

		.inner {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
		}

		.icon_box {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #f5f5f5;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}

	.cart_list {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

		.cart_item {
			height: 120rpx;
			border-bottom: 1px solid #eee;
		}
	}
</style>

2、效果图如下：
进入效果

![滑动效果](https://img-blog.csdnimg.cn/2bd33c185b75405ebb234ea34f0594cb.jpeg#pic_center)

购物弹窗，可下拉关闭
3、码云地址：
代码仓库
https://gitee.com/huajiuZhao/uni-app-tem.git

uniapp 手摸手实现左右菜单联动(vue2)
小白小白从不日别的博客
09-12 332
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
小程序仿饿了么点餐界面
03-27
小程序仿饿了么点餐界面，直接打开就可以预览，数据都是本地构造的，图标用到了iconfont 可以参考下用法
uniapp微信小程序实现菜单左右联动效果
最新发布
qq_35410565的博客
05-09 1473
仿点餐小程序，点餐页面实现左右菜单互联效果
小程序仿饿了么弹窗式购物车
weixin_34209851的博客
07-20 929
2019独角兽企业重金招聘Python工程师标准>>> ...
基于uniapp vue3.0 uView 做一个点单页面（包括加入购物车动画和左右联动）
m0_49083276的博客
04-30 2611
下拉有自定义组件（商品卡片、进步器、侧边栏等）源码。
左右菜单联动：轻松实现网页导航的高效与便捷！
CRMEB小程序商城的博客
12-18 1622
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
uniapp左右联动菜单
wilL-my的博客
11-24 9452
来自uView提供的模版https://uviewui.com <template> <view class="u-wrap"> <view class="u-search-box"> <view class="u-search-inner"> <u-icon name="search" color="#909399" :size="28"></u-icon> <text class="...
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离
04-05
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离 加菜 已支付 支付成功,祝您用餐愉快 杯鸭碟头饭 数量:1 ￥2880 共2份小计￥57.60 订单详情-VUE模板-UNIAPP模板 原切片设计文件下载后用UNIAPP切片软件生成导出就可以使用 VUE模板 UNIAPP模板 布局、样式、JS分离
[android毕业设计源码]精品基于Uniapp实现的美食APP[安卓毕业设计]
01-03 964
背景： 随着人们生活水平的提高，美食已经成为人们生活中不可或缺的一部分。然而，传统的美食信息获取方式存在着信息不全、不及时等问题，人们往往难以找到自己喜欢的美食。因此，开发一款基于Uniapp的美食APP，能够为用户提供便捷的美食信息获取渠道，满足用户对美食的需求。 目的： 开发一款基于Uniapp的美食APP，旨在为用户提供一个便捷的美食信息获取平台，实现用户与美食的精准匹配，提供可靠的美食信息和推荐，为用户提供更加个性化、高效的美食体验。 意义： 1. 提高美食信息获取的效率：通过APP实现用户发布
仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
Jeff169的博客
05-14 9451
仿美团,饿了吗两个ListView联动,左边点击切换右边,右边滑动切换左边
uniapp 仿美团饿了么城市列表+顶部搜索
Libertied的博客
02-22 2606
直接上图片 效果图如下 <template> <view class="introScroll"> <view class="topView"> <!-- 城市搜索输入框 --> <view class="serchView"> <view class="serch"> <image class="serchIconImage" src="/static/app-plus/image/c
微信小程序Demo：仿饿了吗
08-01
仿饿了吗小程序，项目源码：http://www.wxapp-union.com/thread-8296-1-1.html
仿饿了吗点餐，仿美团点餐，listView二级联动
08-30
仿饿了吗点餐，仿美团点餐，listView二级联动，简单的逻辑处理，可以下载参考下，希望对你会有所帮助。
仿饿了吗微信小程序
08-22
微信小程序 demo 饿了吗
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email hzj_51it@aliyun.com wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的地址，icon：图标，txt：文字内容，type ：跳转方式==navigate，redirect，reLaunch，switchTab，navigateBack
基于uniapp的高仿ONE一个
08-10
基于uni-app 的高仿「ONE·一个」
uni-app 实现手机端滑动导航栏
huangdj321的博客
02-26 2762
创建项目 此步骤省略，不会的同学可以参看我的另外一篇文章： 创建项目 这里以一个微博首页为例，最终实现的页面效果图如下： 样式准备 1、在 pages/index/index.vue 文件中，添加如下代码： <template> <view class="content"> <scroll-view scroll-x> <view class="scroll"> <vie
uni-app实现左右联动效果
m0_60910195的博客
09-07 2301
1，首先在onload里面调用这个方法。可以得到右侧数据的高度数组 getHeightList() { let that=this let selectorQuery=uni.createSelectorQuery().in(this); selectorQuery.selectAll('.right_box').boundingClientRect(function(rects){ let arr=[0] let top=0 r
uni-app滑动菜单效果.既可以点击也可以滑动切换tab
肖肖肖丽珠的博客
01-12 4513
<template> <view class="homepage"> <!-- 顶部导航栏 --> <view class="horizonal-tab"> <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-left="scrollleft"&...
uni app锚点定位 、自动吸顶、滚动自动选择对应的锚点
07-29
uni app是一款跨平台的应用开发框架，它具备锚点定位、自动吸顶和滚动自动选择对应的锚点的功能。 首先，锚点定位是指在页面中设置指定的位置或元素，通过链接或点击事件跳转到目标位置。在uni app中，我们可以使用`navigator`组件进行锚点定位的设置。通过设置`url`属性来指定跳转的页面，同时在跳转的目标页面中进行锚点的定位，就可以实现锚点的跳转定位。 其次，自动吸顶是指当页面滚动到指定位置时，元素会自动固定在页面的顶部，以保持固定位置显示。在uni app中，我们可以使用`uni-page-top`组件来实现自动吸顶的效果。通过设置需要吸顶的元素，然后在滚动的过程中，当元素滚动到一定位置时，就会自动固定在页面的顶部。 最后，滚动自动选择对应的锚点是指在页面滚动的过程中，根据当前滚动的位置，自动选择相应的锚点进行定位。在uni app中，我们可以通过监听页面的滚动事件，在滚动的过程中获取当前滚动的位置，然后与预设的锚点位置进行比较，选择最接近的锚点进行定位。 综上所述，uni app提供了锚点定位、自动吸顶和滚动自动选择对应的锚点的功能，通过合理运用相关组件和事件监听，我们可以轻松实现这些功能，提升应用的用户体验。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值