uniapp实现美团效果，右侧上下滚动商品，左侧菜单切换选中并高亮

最新推荐文章于 2024-06-04 20:07:55 发布
最新推荐文章于 2024-06-04 20:07:55 发布
阅读量2.8k 收藏 13
点赞数
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41579185/article/details/117734048
版权

有三步

  1. 初始化左右滑块的高度
  2. 得到右边每个区间的top和buttom
  3. 监听右边商品部分滑动事件，如果在某个区间内，则那个区间的菜单名高亮

主界面index.vue

	<view style="display: flex;">
	<!-- 菜单 -->
	<food-menu :tabBars="tabBars" :tabIndexShow="tabIndexShow" :swiperWidth="menuWidth" :swiperHeight="swiperHeight" @tabtap="tabtap"></food-menu>
	<!-- 商品 -->
	<scroll-view scroll-y="true" @scroll="scrollGet($event)" scroll-with-animation :scroll-into-view="'tab_'+tabIndex"
	 :style="{height:swiperHeight+'px',width:foodWidth+'px'}" style="padding-top: 20px;">
		<block v-for="(items,index) in foodsList" :key="index">
			<view :id="'tab_'+tabBars[index].id">
				<view style="font-size: 30upx;height: 40upx;margin-left: 20upx;">
					{{tabBars[index].name}}
				</view>
				<template v-if="items.list.length>0">
					<block v-for="(item,index1) in items.list" :key="index1">
						<food-component @showModal="showModal" :item="item"></food-component>
					</block>
				</template>
				<template v-else>
					该菜单尚未添加商品
				</template>
			</view>
		</block>
	</scroll-view>
</view>

<script>
	import foodComponent from "./food-component.vue"
	import foodMenu from "./food-menu.vue"

	export default {
		components: {
			foodComponent,
			foodMenu
		},
		data() {
			return {
				swiperHeight: 0,
				menuWidth: 0,
				foodWidth: 0,
				tabIndexShow: 0,
				tabIndex: 0,
				scroNum: [], //记录商品的高度
				tabBars: [{
						name: "粑粑",
						id: "0"
					},
					{
						name: "粥粥",
						id: "1"
					},
					{
						name: "包包",
						id: "2"
					},
					{
						name: "面面",
						id: "3"
					},
					{
						name: "粉粉",
						id: "4"
					},
					{
						name: "肉肉",
						id: "5"
					},
				],
				foodsList: [{
						list: [{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
							},{
							food_name: "小米南瓜粥", //名字
							food_price: 13.5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}]
					},
					{
						list: [{
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, {
							food_name: "黑米粥", //名字
							food_price: 199, //价格
							food_image: "../../static/test.jpg",
							title: "我是标题",
							num: 100
						}, ]
					},
					{
						list: [{
							food_name: "白米粥", //名字
							food_price: 299, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100,
							priority: 11, //优先级
							display: 1, //是否显示
						}, ]
					},
					{
						list: [{
							food_name: "包子", //名字
							food_price: 5, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, ]
					},
					{
						list: [{
							food_name: "饺子", //名字
							food_price: 100, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, ]
					},
					{
						list: [{
							food_name: "肉肉", //名字
							food_price: 999, //价格
							food_image: "../../static/logo.jpg",
							title: "我是标题",
							num: 100
						}, ]
					}
				]
			}
		},
		onLoad() {
			//初始化页面的组件大小
			uni.getSystemInfo({
				success: (res) => {
					// - uni.upx2px(100) 减去头部的列表
					let height = res.windowHeight
					let windowWidth = res.windowWidth
					this.swiperHeight = height - uni.upx2px(153)
					this.menuWidth = windowWidth / 5
					this.foodWidth = windowWidth * 4 / 5
				}
			});
		},
		mounted() {
			this.loadScroNum();
		},
		methods: {
			//初始化右边商品的高度、起始高度数组，便于右边滑动，左边跟着动
			loadScroNum() {
				for (var i = 0; i < this.tabBars.length; i++) {
					wx.createSelectorQuery().select('#tab_' + i).boundingClientRect(e => {
						this.scroNum.push({
							top: e.top,
							bot: e.top + e.height
						})
					}).exec()
				}
			},
			// 监听子组件的tab点击事件
			tabtap(index) {
				this.tabIndexShow = index;
				this.tabIndex = index;
			},
			//监听右侧商品栏滑动事件，如果当前滑动的长度达到某个个区间内，则该区间的菜单为高亮
			scrollGet(e) {
				var now = parseInt(e.detail.scrollTop) + 40
				for (var i = 0; i < this.tabBars.length; i++) {
					if (now > this.scroNum[i].top && now < this.scroNum[i].bot) {
						this.tabIndexShow = i
						return
					}
				}
			}
		}
	}
</script>

<style>
	.swiper-tab-list {
		width: 100%;
		text-align: center;
		color: #808080;
		font-size: 36upx;
		height: 160upx;
		line-height: 160upx;
	}

	.active {
		color: #FEDE33;
	}
</style>

菜单组件 food-menu.vue

<template>
	<view style="flex:1;background-color: #f1f2f5;">
		<scroll-view scroll-y="true" :style="{height:swiperHeight+'px',width:swiperWidth+'px'}">
			 <block v-for="(tab,index) in tabBars" :key="tab.id">
				<view 
				class="swiper-tab-list" 
				:class="{'active':(tabIndexShow===index)}" 
				@tap="tabtap(index)">
					{{tab.name}} {{tab.num?tab.num:''}}
					<view class="swiper-tab-line"></view>
				</view>
			 </block>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:{
			tabBars:Array,
			tabIndexShow:Number,
			swiperHeight:Number,
			swiperWidth:Number
		},
		methods: {
			// tab点击事件
			tabtap(index) {
				this.$emit('tabtap',index)
				// 子组件相同名称的属性值改变后，父组件的对应监听事件结束后，将修改父组件的该属性和子属性一样
				// this.tabIndex = index;
			},
		}
	}
</script>

<style scoped>
	.swiper-tab-list{
		width: 100%;text-align: center;
		color: #808080;
		font-size: 36upx;
		height: 160upx;
		line-height: 160upx;
	}
	.active {
		color: #000000;
		font-weight: bold;
		background-color: #FFFFFF;
	}
</style>

商品组件 food-component.vue

<template>
	<view class="box">
		<image class="food_image" :src="item.food_image"></image>
		<view class="content">
			<view class="title">{{item.food_name}}</view>
			<view class="foodNum">月售{{item.num}}</view>
			<view class="money">￥{{item.food_price}}</view>
			<view class="search">挑选规格</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object
		},
		data() {
			return {
				
			}
		},
		methods: {
		}
	}
</script>

<style>
	.box{
		min-height: 190rpx;width: 100%;padding: 5rpx;display: flex;
		height: auto;
	}
	.box>.food_image{
		height: 160rpx;width: 160rpx;border-radius: 5%;margin:15rpx
	}
	.box>.content{
		padding: 5rpx;margin-left: 5rpx;width: calc(100% - 195rpx);position: relative;
	}
	.box>.content>.title{
		font-size: 36rpx;font-weight: 600;
	}
	.box>.content>.foodNum{
		font-size: 25rpx;color: #6D6D72;
	}
	.box>.content>.money{
		font-size: 40rpx;color: #FF0000;font-weight: 600;float: left;
	}
	.box>.content>.money{
		font-size: 40rpx;color: #FF0000;font-weight: 600;float: left;
	}
	.box>.content>.search{
		font-size: 32rpx;font-weight: 600;float: right;background-color: #FFA200;position: absolute;right: 40rpx;bottom: 20rpx;border-radius: 5%;padding: 0 5rpx;
	}
</style>
学而不化，非学也。
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp -- 滑动页面切换(兼容微信小程序)
m0_72951245的博客
08-04 3956
（先声明哦我可不是偷懒，只是想学术借鉴一下）因为最近有在做左右滑动功能，秉持着能 ctrl+c 绝不动脑子的原则，开始了我的一顿操作，结果很明显没找到，言归正传，上代码。
uniapp使用scroll-view实现菜单的左联右和右联左
m0_68956554的博客
04-16 979
scroll_into: '', //值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。在点击左侧菜单的时候给trigger赋值，完成右侧商品的滑动。data定义变量trigger，添加动态class，到这里基本就已经完成了右联左。计算左侧菜单分类高度。
Uniapp实现左侧导航和右侧scroll-view联动
最新发布
weixin_47249500的博客
06-04 1148
1、点击左侧分类列表，高亮显示当前分类项，右侧scroll-view滑动到分类对应的位置。2、滑动右侧的scroll-view，左侧的分类列表高亮显示当前商品所属的分类。
uniapp —— 实现左右联动商品分类页面
LizequaNNN的博客
04-26 1万+
uniapp —— 实现左右联动商品分类页面
uni——商品选择（左侧、右侧均可滑动分页等）
努力、拼搏、奋进
04-27 297
uni——商品选择（左侧、右侧均可滑动分页等）
uni-app Tab切换
m0_61289694的博客
06-20 364
要实现的功能：点击标题切换内容在data中定义一个数组，遍历数组，再给标题一个点击事件 其中的isActive是点击之后将index的值赋给isActive，默认为0点击事件因为我有一个默认的样式状态，所以添加了这个动态绑定样式，如果不需要可以不写我的是这样的 下面是我的全部代码：HTML部分： script部分：CSS部分：.........
uniapp监视屏幕的左滑右滑事件
weixin_45354350的博客
01-30 620
uniapp监视屏幕的左滑右滑事件
uniapp tab切换三种方式（切换内容不同情况下使用）
热门推荐
weixin_50639421的博客
09-14 1万+
uniapp tab切换两种方式（切换内容不同情况下使用） 文章目录**uniapp tab切换两种方式（切换内容不同情况下使用）**一、tabs切换两种方式（切换内容不同情况下使用）1.直接拆开使用（建议tab项比较少使用）2.使用scroll-view滑动 一、tabs切换两种方式（切换内容不同情况下使用） 1.直接拆开使用（建议tab项比较少使用） <template> <view> <view class="head-nav"> <view
javascript上下方向键控制表格行选中并高亮显示的方法
10-24
在JavaScript编程中，有时我们需要为用户创建交互式表格，使得用户可以通过键盘的上下方向键来选中和高亮显示表格的行。这个功能在数据密集型应用中特别有用，例如电子表格或者数据库浏览界面。本篇文章将详细讲解...
JS实现选中当前菜单后高亮显示的导航条效果
10-23
主要介绍了JS实现选中当前菜单后高亮显示的导航条效果,涉及JavaScript针对页面元素的遍历及样式动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
vue实现吸顶、锚点和滚动高亮按钮效果
10-16
在 Vue 中实现吸顶、锚点和滚动高亮按钮效果，能够提升用户体验，尤其是在内容丰富的页面中。以下将详细介绍这三种效果的实现方式。 1. **吸顶效果**： 吸顶效果是指当页面滚动到某一位置时，某个元素会固定在屏幕...
jQuery实现的图文高亮滚动切换特效实例
10-23
主要介绍了jQuery实现的图文高亮滚动切换特效,涉及jquery基于鼠标事件针对页面元素遍历与动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
【uni-app 实现左侧点击右侧滚动，仿美团菜单滚动】
TChildeSeven的博客
07-16 4763
uni-app实现仿美团菜单，点击左侧菜单，右侧跳到与左侧相对应的位置（NO.1） 默认是推荐，如果点妙蛙种子，右侧就自动滑动到id相应的地方 点击点菜评价的切换在NO.2 1.template <view> <view class="plan4 fle" v-if="p3_cur==0"> <view class="plan5 fle1"> <scroll-view scroll-y="true" class="fon_6 " :style="
uniapp使用swiper组件自定义左侧菜单栏和切换菜单
weixin_44784777的博客
10-13 1538
uniapp使用swiper组件自定义左侧菜单栏和切换菜单
uniapp利用scroll-view实现左边按钮定位右边页面滚动
m0_62217360的博客
11-28 2756
uniapp利用scroll-view实现左边按钮定位右边页面滚动
原生JS实现图片的轮流播放
淡水鱼
09-08 2957
网页展示中常用到图片的轮流播放，这里使用了四张长图来进行图片轮放，下面是代码： f7.html MyProject srh f7.css .top_div{ width
uniapp (VUE) tab切换 模板
FORGIVE66的博客
09-09 486
<template> <view class="content"> <!-- 头部 --> <view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabC...
uni-app 物理返回键、右滑操作跳转到 指定页面
weixin_40667613的博客
01-06 3564
一、需求： uni-app物理返回键需跳转指定页面，而不是上一页。 二、相关文档： uni-app页面生命周期 uni-app支持如下页面生命周期函数： 函数名 说明 平台差异说明 最低版本 onBackPress 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；...
uniapp左右联动菜单
wilL-my的博客
11-24 9220
来自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="...
uniapp实现按钮点击高亮切换
07-20
在 UniApp 中，你可以使用条件渲染和绑定事件来实现按钮点击高亮切换的效果。下面是一个简单的示例： 1. 在页面的模板中定义按钮，并为按钮绑定点击事件： ```html 按钮 ``` 2. 在页面的脚本中定义相关的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值