【uniapp前端组件】仿美团外卖商品列表

已于 2022-09-02 11:22:53 修改
阅读量2k 收藏 3
点赞数
分类专栏： uniapp前端组件 文章标签： 前端 uni-app 微信 个人开发
于 2022-08-25 10:26:07 首次发布
本文出自公子柒的博客，转载必须注明出处。
本文链接：https://blog.csdn.net/weixin_43838701/article/details/126519247
版权

仿美团外卖商品列表

简易实现美团外卖商品列表，没什么技术难点，简单来说就是两个scroll-view协作，并且两个scroll-view不会滑动冲突。

实际效果

仿美团外卖商品列表实际项目效果

简介

左右两个scroll-view简易实现美团外卖商品列表功能。rightBar属性仅为示例，可根据实际数据结构二次开发。

属性介绍

属性名类型默认值必填说明
shopOptionsObject是商品列表整体数据。
shopListArray是shopOptions下属性，不能单独使用。
leftBarObject是shopOptions下属性，不能单独使用。
rightBarObject是shopOptions下属性，不能单独使用。

1、shopList

属性名类型默认值必填说明
shopListArray空是商品列表数据。本文仅为示例，数据结构不同，可根据数据结构二次开发本插件。

2、leftBar

属性名类型默认值必填说明
leftBarWidthString空是左部导航栏长度，例：25%、100px
leftBarBgColorString空是左部导航栏背景色，例：red、#fff
leftBarItemHeightString空是左部导航栏Item宽度，例：25px
leftBarItemFontSizeString空是左部导航栏Item字体大小，例：12px
leftBarItemSelectFontSizeString空是左部导航栏Item选择时字体大小，例：12px
leftBarItemFontWeightString空是左部导航栏Item字体粗细，例：400
leftBarItemSelectFontWeightString空是左部导航栏Item选择时字体粗细，例：400
leftBarItemFontColorString空是左部导航栏Item字体颜色，例：red、#fff
leftBarItemSelectFontColorString空是左部导航栏Item选择时字体颜色，例：red、#fff
leftBarItemBgColorString空是左部导航栏Item背景颜色，例：red、#fff
leftBarItemSelectBgColorString空是左部导航栏Item选择时背景颜色，例：red、#fff

3、rightBar

属性名类型默认值必填说明
rightBarWidthString空是右部导航栏长度，例：75%、650px
rightBarBgColorString空是右部导航栏背景色，例：red、#fff
rightBarItemImgWidthString空是右部商品列表Item图片长宽，例：40px
rightBarItemTitleFontSizeString空是右部商品列表Item标题字体大小，例：12px
rightBarItemTitleFontWeightString空是右部商品列表Item标题字体粗细，例：500
rightBarItemTitleFontColorString空是右部商品列表Item标题字体颜色，例：red、#fff
rightBarItemDesFontSizeString空是右部商品列表Item描述信息字体大小，例：12px
rightBarItemDesFontWeightString空是右部商品列表Item描述信息字体粗细，例：500
rightBarItemDesFontColorString空是右部商品列表Item描述信息字体颜色，例：red、#fff
rightBarItemPriceFontSizeString空是右部商品列表Item价格字体大小，例：12px
rightBarItemPriceFontWeightString空是右部商品列表Item价格字体粗细，例：500
rightBarItemPriceFontColorString空是右部商品列表Item价格字体颜色，例：red、#fff

事件介绍

事件名说明
@rightBarItemClick右部商品列表item点击事件。返回值event:{superIndex: 2, index: 0}，superIndex：左部导航栏当前选择的下标，index：右部商品列表当前点击的下标。

使用示例

<view class="container">
		<bugking7-shop-view 
		:shopOptions="shopOptions" 
		@rightBarItemClick="handleRightClick"></bugking7-shop-view>
</view>

import tabbarItem from '@/pages/index/data.js'

data() {
    return {
        shopOptions: {
            shopList: tabbarItem.tabbarItem,
            leftBar:{
                leftBarWidth:'25%',
                leftBarBgColor:'',
                leftBarItemHeight:'40px',
                leftBarItemFontSize:'13px',
                leftBarItemSelectFontSize:'14px',
                leftBarItemFontWeight:'400',
                leftBarItemSelectFontWeight:'500',
                leftBarItemFontColor:'black',
                leftBarItemSelectFontColor:'#fff',
                leftBarItemBgColor:'#f5f5f5',
                leftBarItemSelectBgColor:'#2979ff'
            },
            rightBar:{
                rightBarWidth:'75%',
                rightBarBgColor:'white',
                rightBarItemImgWidth:'40px',
                rightBarItemTitleFontSize:'15px',
                rightBarItemTitleFontWeight:'500',
                rightBarItemTitleFontColor:'black',
                rightBarItemDesFontSize:'13px',
                rightBarItemDesFontWeight:'300',
                rightBarItemDesFontColor:'gray',
                rightBarItemPriceFontSize:'15px',
                rightBarItemPriceFontWeight:'600',
                rightBarItemPriceFontColor:'red',
            }
        }
    }
},
methods: {
    handleRightClick(e){
        console.log(e)
    }
}

数据结构示例（shopList）

本组件仅为示例，商品列表数据只为测试使用。如果要在项目中使用本组件，请根据数据结构二次开发。注：shopList数据结构须与二次开发组件中右部商品列表v-for时一致。

export default {
    "tabbarItem": [
        {
            "name": "京东",
            "id": "jd",
            "list": [
                {
                    "title": "京东plus年卡",
                    "subTitle": "限时优惠",
                    "desc": "详情请点击>>>",
                    "price": "￥99",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/621c6953-882d-4bbc-9afa-9adcfcc99c9f.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=262&groupId=296&productId=8980413150410",
                    "type": "link",
                    "imgPath": ""
                },
                {
                    "title": "1号店年卡",
                    "subTitle": "领取12个月鸡蛋",
                    "desc": "详情请点击>>>",
                    "price": "￥188",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/57ce3357-2c6d-4c13-bd4f-ab851a6de4bd.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=262&groupId=296&productId=2380704173252",
                    "type": "link",
                    "imgPath": ""
                }
            ]
        },
        {
            "name": "腾讯视频",
            "id": "txsp",
            "list": [
                {
                    "title": "月卡",
                    "subTitle": "限时优惠",
                    "desc": "详情请点击>>>",
                    "price": "￥18",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/4bc77267-4982-44c3-8af9-19b2543329f2.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=157&groupId=106&productId=200309073",
                    "type": "link",
                    "imgPath": ""
                },
                {
                    "title": "季卡",
                    "subTitle": "限时优惠",
                    "desc": "详情请点击>>>",
                    "price": "￥50",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/4bc77267-4982-44c3-8af9-19b2543329f2.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=157&groupId=106&productId=200309074",
                    "type": "link",
                    "imgPath": ""
                }
            ]
        }
    ]
}

存在问题

1、右部商品列表滑动时，左部导航栏暂未实现实时定位

uniapp中scroll-view的滑动事件监听，暂未实现根据计算滑动距离改变左部导航栏实时定位。如果有好的实现方式，欢迎评论留言。

插件地址

仿美团外卖商品列表

公子柒Zzzzzzz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
仿百度外卖,饿了么-商品列表页
01-05
这个主要是通过 - (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)animated scrollPosition:(UITableViewScrollPosition)scrollPosition; 来实现 tableView 的联动
一个基于uniapp的美团外卖微信小程序，涉及到人工智能识别评论，商家店铺商品列表，授权登录，微信支付等等实战功能.zip
最新发布
02-24
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
jquery插件实现的类似美团app加入购物车效果
09-25
jquery插件实现的类似美团，天猫加入购物车效果，空中抛物线掉到购物车中效果。
uni-app 实现购物车
qq_42292879的博客
02-23 9663
#实现购物车 uni-app文档 ##效果图 ##具体代码 前提 实现了商品的购物车添加和用户登录 <template> <view> <view class="" v-if="flag"> 购物车空空如也，请<navigator open-type="switchTab" url="../home/home">先选购</navi...
uni-app:分类
薛定谔的猫
03-06 952
让 scrollTop 的值在 0 与 1 之间切换 这个是因为如果上传scrollTop值很本次更改的scrollTop值一样，它是不会触发scroll-top事件的。screenHeight是屏幕的高度 windowHeight是窗口的宽度 也就是screenHeight-navigationBar高度 - tabBar 高度。ctrl+d快速选择，然后按下箭头左键统一给他添加class样式。为一级分类的 Item 项绑定点击事件处理函数。循环渲染结构时，为选中项动态添加。
模仿美团外卖的微信小程序wechat-meituan-master.zip
09-25
模仿美团外卖的微信小程序wechat-meituan-master.zip
Vue+Uni-app(uniapp)入门与实战+赠送仿美团点餐小程序
05-08
本课程讲了Vue3+Vue2+Uni-app(uniapp)入门基础与实战，其中还重点讲解了ES6、TypeScript这些基础知识，实战由两大价值5000元的真实企业级项目组成，分别是仿京东电商网站和仿美团微信点餐小程序，同时两大项目代码全部赠送，还赠送前后端架构模板，工作中直接使用。VUE和uni-app是目前热门的前端框架，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件和插件，正式上线白屏问题，性能优化、解决iphoneX“刘海”兼容性问题、微信支付、微信授权登录，获取位置在地图上显示，获取用户所在的城市和街道信息，微信小程序发布审核等。对正在工作当中或打算学习VUE和uni-app高薪就业的你来说，那么这门课程便是你手中的葵花宝典。学习技巧：学习当中不要只看，一定要多敲代码，如果碰到某一个知识点不是很明白，不要钻牛角尖，千万不要因为一个点，放弃整个森林，接着往下学，硬着头皮开发项目。只要能亲自开发一个完整的项目，你会发现不明白的地方自然而然就明白了，项目做出来就真正的学会了。此vue和uni-app课程以面试和实战为基础进行讲解，每个知识点都会让你知道在实际项目开发中如何使用，学习后，可以开发大型项目，增强逻辑思维，至少让你拥有3年以上开发经验的实力！代码和ppt均可下载！免费提供《企业级完整实战项目接口文档》，绝对可用
uni-app实战商城类app和小程序
03-07
适用人群具备Html+Css+Javascript基础知识和Vuejs基础知识。课程概述本季度为uni-app实战项目第2季度，将实战商城类app和小程序，其中会包括发布到安卓端app，iOS端app、微信小程序，另外还会涉及Weex（nvue），Vuex模块化管理，商城支付模块等。课程大纲见以下图！
Uni-app(uniapp)入门基础与实战+赠送仿美团微信点餐小程序
04-10
<p> <img src="https://img-bss.csdnimg.cn/202104091508144148.jpg" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202104091508372799.jpg" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202104091508592182.jpg" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202104091509197866.jpg" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202104091509429024.jpg" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202104100627138363.jpg" alt="" /> </p>
uniapp-实现购物车弹框
Anorry的博客
09-03 332
在addCart 也就是加减模块的里面 给 + 和 - 都绑定事件通过传第一个 参数 去判断是+ 还是 -第二个参数就是传点击的这个商品的信息由于存Vuex的代码是写在父组件内 所以需要用$emit 去调用方法(需要在父组件内的子组件上绑定)// 子组件// 父组件},在这里做了判断 如果是- 就调用Vuex内的做减的方法如果是+就是调用加的方法,并且把对应的商品信息也是传递了过去。
仿美团外卖两个ListView联动,左边点击切换右边,右边滑动切换左边
05-14
仿美团外卖两个ListView联动,左边点击切换右边,右边滑动切换左边. 并且右边伴有标题的切换
仿美团下拉筛选菜单——PopupDownMenu
05-05
用PopupWindow+ListView实现的仿美团、淘宝等下拉筛选菜单——PopupDownMenu
贝塞尔曲线实现仿美团商品动态添加到购物车效果
02-22
利用二阶贝塞尔曲线，实现仿美团点击商品后掉落加入到购物车的效果，对于这个模块进行了封装，只需直接调用工具类即可，便于灵活拓展到其它项目中。
外卖扫码点餐独立全开源小程序源码uniAPP+VUE前端
05-18
外卖扫码点餐独立全开源小程序源码uniAPP+VUE前端 uniapp前端 Vue后台管理 vue-cli-service laravel+mysql5.7 全开源 100%开源 稳定运营 值得入手的好源码
uniapp 伪弹窗形式实现美团左右列滑动联动
qq_41277759的博客
07-26 354
整理一下，核心属性就是scroll-into-view，利用动态赋值让两个scroll-view自动滚动，其次就是获取右侧列表每一项距离顶部的距离，动态计算出当前右侧滚动到哪个分类下后再将左侧动态赋值。近期有项目要求做一个类似美团的左右列联动的商品选择列表，但是去插件市场找了一圈基本都是整个页面的列表，没有在某个区域内实现左右列联动的，于是自己写了一套。很简单，动态赋值，利用scroll-into-view属性，当绑定的值改变时，他会自动滚动到元素id为绑定值的地方。下面开始右侧跟随左侧。
uniapp小程序系列-07单个商品列表开发
mylamb的博客
09-26 106
4.再创一个vue文件。
Uniapp+Nodejs实现外卖App项目1-项目介绍
老徐的博客只有干货
07-13 2177
本项目采用uniapp和nodejs（数据接口）、mongodb等技术实现了一个类似美团外卖的简易APP。项目主要目的是为了快速上手，如何快速使用uniapp开发一个app项目，同时掌握一些常用的知识点。有兴趣的朋友可以拿去做二次开发或毕业设计也是不错的。通过本项目，你将学习到： 1、uniapp基础 2、vue和vuex的使用 3、nodejs+express+mongodb的组合如何快速开发一套api接口 4、uniapp本地存储的使用 5、uniapp基本组件和扩展组件的使用 6、如何实现购物车逻辑？
uniapp仿美团左侧菜单栏
qq_43432157的博客
01-24 4957
uniapp仿美团左侧菜单栏 实现仿美团菜单页，效果图如下 主题内容 <template> <view class="deviceList"> <!-- 左侧菜单 --> <view class="findRoom-l"> <scroll-view scroll-y="true" style="background: #fff;"> <view class="scroll-item" @click="onScroll
用uniapp写瀑布流商品列表
weixin_42317757的博客
05-28 773
设置商品展示区域(.item)的背景色、圆角、阴影以及溢出隐藏。设置商品名称和价格的字体大小和颜色。创建一个uniapp项目，并在pages文件夹中创建一个商品列表的页面（例如：GoodsList.vue）。在页面的JS文件中定义商品列表数据（goodsList），可根据需求从后端接口获取数据。在页面中使用uni-ui组件库中的 masonry 组件来实现瀑布流布局。运行 uniapp 项目，即可看到瀑布流商品列表的效果。表示设置每个商品之间的间距为10px。表示指定每个商品在列表中的唯一标识。
csdn美团外卖爬虫
01-18
csdn美团外卖爬虫是指通过csdn平台上的相关技术资料和教程，利用Python或其他编程语言编写的程序，用于获取美团外卖平台上的数据信息。通过爬虫技术，可以实现对美团外卖平台上商家信息、菜单价格、订单评价等数据的抓取和分析。 美团外卖爬虫的应用场景主要包括市场调研、竞品分析、数据挖掘等方面。例如，可以通过爬虫获取美团外卖平台上的热门菜品、销售情况和用户评价，帮助商家进行产品定位和市场推广，也可以帮助投资者和研究人员对餐饮行业进行数据分析和预测。 当然，美团外卖爬虫也有严格的法律和道德规范，要求爬取数据时要遵守相关的法律法规和美团外卖平台的使用协议，不得进行非法爬取和商业传播。另外，爬取过程中也需要注意数据隐私和安全保护，防止个人信息被滥用和泄露。 最后，需要指出的是，美团外卖爬虫技术虽然可以帮助我们获取有用的信息和数据，但也需要慎重使用，避免对他人利益造成侵害和不良影响。在使用爬虫技术时，应该遵守合法合规的原则，同时也要注意数据的正确性和可靠性，避免产生误导性的分析结论。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

公子柒Zzzzzzz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值