前端学习笔记-8-14.1学习饿了么rating组件

最新推荐文章于 2023-10-27 18:49:22 发布
最新推荐文章于 2023-10-27 18:49:22 发布
阅读量403 收藏
点赞数
分类专栏： 前端 文章标签： 前端学习笔记 学习饿了么rating组件 饿了么rating组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43000359/article/details/83281294
版权
本文详细解析饿了么UI库中的rating组件，包括评分信息、组件实现及评价详细信息。第一部分介绍了综合评分与商品评分的布局；第二部分讲解props的使用、星星组件的引入以及响应式设计；第三部分涉及ratingselect组件的应用，通过ratings接口获取数据并展示，同时介绍评价信息的DOM结构和CSS层级处理，以及时间戳转换为可读时间的方法。
摘要由CSDN通过智能技术生成

rating（评价）组件可以简单分为三部分：
一.评分等信息
二.评价组件
三.评价详细信息
在这里插入图片描述
一.rating的第一部分
说下第一部分的结构，分左右，左边是综合评分，右边是商品评分、送达时间等。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
二.第二部分
要引入的
在这里插入图片描述
1.props接收seller信息

最低0.47元/天 解锁文章
我就是小强
关注
专栏目录
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Rating组件
weixin_47730343的博客
02-06 1351
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Rating组件
vue2.0 饿了么学习笔记（16）rating组件的开发
qq_22317389的博客
05-26 1589
  首先编写ratings，要用到betterScroll <template> <div class="ratings" ref="ratings"> <!-- ratings-content大于ratings的时候出现滚动 --> <div class="ratings-content"> 并添加样式： 和g
基本组件-rating
m0_62236091的博客
05-21 137
rating 评分条，表示用户使用感受的衡量标准条。 属性 名称 类型 默认值 必填 描述 numstars number 5 否 设置评分条的星级总数。 rating number 0 否 设
【鸿蒙软件开发】ArkTS基础组件之Rating(评分组件)、RichText(富文本显示)
m0_62599305的博客
10-27 1517
Rating组件：提供在给定范围内选择评分的组件。 RichText组件：富文本组件，解析并显示HTML格式文本。提供在给定范围内选择评分的组件。说明 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。无 从API version 9开始，该接口支持在ArkTS卡片中使用。参数名：rating，参数类型：number，参数是否必填：是，参数作用：设置并接收评分值。默认值：0 取值范围： [0, stars]，规定：小于0取0，大于stars取最大值sta
AJAX扩展控件Rating(等级控件)的使用方法总结
zjj780320380的专栏
05-11 2877
如上图所示的等级控件（这个控件主要指定样式）：页面代码： 无标题页 <!-- .ratingStar { font-size:0pt; width:15px; height:12px; padding:1px;
前端学习笔记-8.13学习饿了么-商品详情页
qq_43000359的博客
10-22 1208
我们要实现点击商品，跳转至商品详情页，商品详情页分为头图，基本信息，split组件，商品介绍，split组件，商品评价。 首先设置food.vue的整体属性，设置动画。 然后设置头图的样式，头图左上角有个返回按钮，记得给他设置点击事件。 接着是基本信息，商品名称，价格，加入购物车等。 此时设置split组件。 商品介绍。 商品评价。这是个组件ratingselect.vue。说说这个组件怎么设置。...
前端学习笔记-8.12.vue2.0学习饿了么购物车小球动画
qq_43000359的博客
10-19 1211
思路：加号cartcontrol.vue和购物车shopcart.vue分别是两个组件，他们有一个共同的父组件good.vue作为媒介，加号用emit()方法把信息传给父组件，父组件把信息再传递给另一个购物车子组件。 要实现：通过点击加号，出现小球抛物线落入购物车。 只需考虑小球drop-enter-active的状态，运用emit和on派发和监听事件，cartcontrol派发事件this.$e...
2023-04-06-项目笔记-第一阶段-14.指针 14.1内存
最新发布
01-15
2023-04-06-项目笔记-第一阶段- 9.函数 9.1函数的使用 10.数组 10.1.数组的使用 11.操作符 11.1操作符的使用 12.常见关键字 12.1关键字 typedef 12.2关键字static 12.2.1修饰局部变量 12.2.2修饰全局变量 12.2.3修饰...
冰河的渗透实战笔记-冰河.pdf
05-18
冰河整理的全网首个开源的以实战案例为背景的渗透实战笔记，全书共442页，共计37万字（不计空格）。整本书的内容涵盖：Kali基础、渗透工具、木马制作、钓鱼链接生成、爆破密码、内存溢出攻击、web渗透、数据提权、...
"星级评分"组件:<rate> —— 快应用组件库H-UI
H-UI官方博客
04-16 216
<import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="rate" src="../Common/ui/h-ui/form/c_rate"></import> <template> <div class="contain...
vue2.0饿了么学习笔记（15）ratingselect组件的实现
qq_22317389的博客
05-26 1766
之前我们已经完成了图片，产品价格和购物车部分，split组件，之后就是评论选择让ratingselect的实现，先完成部分Dom结构 ratingselect组件的实现 1）创建ratingselect文件和ratingselect.vue 2）设置ratingselect组件中需要的props接收的数据，数据应从food.vue组件传入&lt;ratingselect&gt;&lt;...
Semantic UI 之 评分组件 rating
哈
08-10 507
页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>评分</title> <link rel="stylesheet" href="semantic-ui/semantic.min.css"> <script type="text/javascript
ExtJs星级评分Rating组件实现星级评分
gfgf555的博客
11-22 1003
EtxJs星级评分实现小插件。
前端实现评分功能
Hhjian524的博客
06-04 2204
实现的效果如下： 具体代码如下： html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg
项目总结：vue.js2.5饿了么APP（6）主要组件实现 - 评价页+商家页部分
Sabrina_cc的博客
06-30 1814
说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！ 之前章节传送： 项目总结：vue.js2.5饿了么APP（1）概述+项目准备 项目总结：vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件 项目总结：vue.js2.5饿了么APP（3）主要组件实现 - 购物车相关组件（上） 项目总结：vue.js2.5饿了么APP（4）主要组件实现 ...
vue饿了么-拆分组件+配置路由
qq_22317389的博客
07-17 1201
在index.html中加载reset.css样式 &lt;link rel="stylesheet" href="static/css/reset.css" type="text/css"&gt; 移动端视口不能被缩放 &lt;meta name="viewport" content="width=device-width,initial-scale=1.0, max
CSS实现星状评分效果 – CSS Star Rating
caibinghong的专栏
05-17 815
CSS实现星状评分效果 – CSS Star Rating 有一个场景，相信大家不会感到陌生，那就是我们购物之后对商家、物流、商品等进行评价，其中有一个直观的交互就是星状打分，这种交互方式增强了用户对商品评价的直观感受，更贴近用户的行为习惯，这是一种非常棒的设计。 从技术的角度来说，利用html+css就能完全搞定这种交互效果，好多童鞋都以为是js实现的呢，有木有~~~,哈哈。肯定...
Go语言学习笔记 - 雨痕
"Go学习笔记 By 雨痕" 这是一份由雨痕编写的Go语言学习笔记，详细记录了作者在学习Go语言过程中的心得和知识点。笔记内容涵盖Go语言的基础到高级特性，适合已经观看过无闻大神视频并希望进一步巩固和深入理解Go语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值