【前端】uniapp实现美团效果，右侧滑动商品，左侧菜单高亮

最新推荐文章于 2024-03-10 17:25:27 发布
最新推荐文章于 2024-03-10 17:25:27 发布
阅读量2.4k 收藏 15
点赞数 1
分类专栏： 大学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42295814/article/details/109699763
版权

有三步

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

主界面index.vye

<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>
唐小尊
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿美团外卖两个ListView联动,左边点击切换右边,右边滑动切换左边
05-14
仿美团外卖两个ListView联动,左边点击切换右边,右边滑动切换左边. 并且右边伴有标题的切换
uniapp -- 滑动页面切换(兼容微信小程序)
m0_72951245的博客
08-04 3694
（先声明哦我可不是偷懒，只是想学术借鉴一下）因为最近有在做左右滑动功能，秉持着能 ctrl+c 绝不动脑子的原则，开始了我的一顿操作，结果很明显没找到，言归正传，上代码。
uniapp实现菜单左右二级联动
最新发布
m0_52559388的博客
03-10 879
uniapp实现菜单左右二级联动
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左右联动菜单
wilL-my的博客
11-24 9133
来自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仿美团左侧菜单栏
qq_43432157的博客
01-24 5005
uniapp仿美团左侧菜单栏 实现仿美团菜单页，效果图如下 主题内容 <template> <view class="deviceList"> <!-- 左侧菜单 --> <view class="findRoom-l"> <scroll-view scroll-y="true" style="background: #fff;"> <view class="scroll-item" @click="onScroll
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
weixin_30495469的博客
12-31 286
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自：在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香，一直用一直香)在大佬的指引下学会自己去写写简单且容易实现的东西，左侧滑动菜单上次学习的接口是分成了一级和二级，看到的时候整个人是奔溃的，内心mmp写不来1.记得不清楚了，大概的数据传过来是这样子的，可以得知一二级分类关系是通过cl...
uniapp实现左侧菜单右侧商品锚点组件
Study123wf的博客
05-05 271
原理:利用scroll-view绑定scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。scroll-view：用于区域滚动。// 如果没有防抖会触发许多次。// timer定义在全局。注意点: 滚动增加防抖。
Android实现美团APP的底部滑动菜单
08-25
主要为大家详细介绍了Android实现美团APP的底部滑动菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS+CSS实现经典的左侧竖向滑动菜单效果
10-23
主要介绍了JS+CSS实现经典的左侧竖向滑动菜单效果,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
uniapp实现可以左右滑动导航栏
01-18
本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码，供大家参考，具体内容如下 <home></home> <image click=isScale class=icon-style src=/static/iconImg/list.png xss=removed></image> <vi
JS实现的左侧竖向滑动菜单效果代码
10-23
主要介绍了JS实现的左侧竖向滑动菜单效果代码,涉及JavaScript响应鼠标点击事件操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
uni-app - 详细实现左右垂直分类列表功能效果，类似商城商品、电商商品分类管理（左侧菜单+右侧列表内容），分类列表左右联动，简易的商品分类垂直分类（提供详细示例代码，一键复制运行）
王佳斌
08-12 5029
uni-app - 左右垂直分类列表（类似商城商品分类，左侧菜单右侧列表内容），uni-app左侧菜单,左右联动,侧边导航分类，uniapp实现左右联动商品分类页面，uni-app侧边导航分类,适合商品分类页面，uniapp实现左右联动 左侧标题 右侧滚动，uni-app左侧产品分类右侧详细内容，uni-app项目中左右两级列表，类似商城左右两侧垂直分类列表。uni-app项目中左右两级列表，uni-app项目中左右两级列表联动功能，uniapp 微信小程序 实现左侧菜单右侧列表，uni-app实战商城项目
uni-app 左右联动
夜惊如水
07-30 1199
如果有问题 请指出 <template> <view @touchend="touchend"> <u-navbar class="navbar-zz" back-text="返回" title="分类" :is-back="false" :border-bottom="false"></u-navbar> <view class="u-flex u-col-top"> <scroll-view class="..
uni app实现左右联动
shinjie1210的博客
07-19 1098
目录 编写dom 右菜单栏联动左内容栏 左内容栏联动右菜单栏 求助 插件市场自带的插件不太好用 还是手动写吧 编写dom <scroll-view class="total" scroll-y="true" :style="'height:'+height+'px'"> <scroll-view scroll-y="true" class="title"> <view v-for="(item,index) in cateList" class="n
uni-app —— 小程序实现左右菜单联动
Bonsoir777的博客
11-11 4794
本文主要介绍小程序菜单的左右了联动实现过程
uni-app实现左右联动效果
m0_60910195的博客
09-07 2205
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
uniapp上下元素联动
weixin_45397693的博客
03-20 716
view部分
uniapp scroll-view左侧菜单栏通过伪元素实现active选中效果
黎小小的博客
06-01 327
【代码】uniapp scroll-view左侧菜单栏active选中效果。
前端uniapp中点击左右箭头左右滑动效果
06-01
要实现在uniapp中点击左右箭头左右滑动效果，你可以使用uni-swiper组件。uni-swiper是一个轮播组件，可以实现左右滑动切换图片、内容等效果。 使用方法如下： 1. 在你的页面中引入uni-swiper组件： ```vue <template> <view class="swiper-container"> <uni-swiper :autoplay="true"> <uni-swiper-item> <image src="/static/img/1.jpg"></image> </uni-swiper-item> <uni-swiper-item> <image src="/static/img/2.jpg"></image> </uni-swiper-item> <uni-swiper-item> <image src="/static/img/3.jpg"></image> </uni-swiper-item> </uni-swiper> </view> </template> <script> import uniSwiper from '@/components/uni-swiper/uni-swiper.vue' import uniSwiperItem from '@/components/uni-swiper/uni-swiper-item.vue' export default { components: { uniSwiper, uniSwiperItem } } </script> ``` 其中，uni-swiper表示轮播组件，uni-swiper-item表示轮播项，可以在里面放置图片、文字、按钮等内容。 2. 配置uni-swiper组件的属性和事件： ```vue <uni-swiper :autoplay="true" @change="swiperChange"> <uni-swiper-item> <image src="/static/img/1.jpg"></image> </uni-swiper-item> <uni-swiper-item> <image src="/static/img/2.jpg"></image> </uni-swiper-item> <uni-swiper-item> <image src="/static/img/3.jpg"></image> </uni-swiper-item> </uni-swiper> ``` 其中，autoplay表示是否自动轮播（默认为false），change表示轮播切换时触发的事件。 3. 在页面中添加样式： ```css .swiper-container { height: 200rpx; overflow: hidden; } .swiper-item { display: flex; justify-content: center; align-items: center; height: 100%; } .swiper-item img { width: 100%; height: 100%; object-fit: cover; } ``` 这样，你就可以在uniapp中实现点击左右箭头左右滑动效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值