微信小程序中的店铺评分组件及某视频剪辑软件中用挽救(保存的简写)实现的评分显示组件

在微信小程序中，有遇到要展示店铺评分，或者是订单完成后对商品进行评价，用到了星星展示，查了下，在微信中无法使用挽救(保存的简写)实现图片，微信中只能将挽救(保存的简写)图片转成base64来显示，所以是在某视频剪辑软件中使用的挽救(保存的简写)来实现评分

1.效果图

微信中的可以点击及显示，但是，显示的话，在4.2分，4点多分的时候，显示的是半颗星

某视频剪辑软件中用的是挽救(保存的简写)实现，所以用的是占比的形式，可以有一点点的星

2.微信实现店铺评分显示及商品评价星星展示

子组件index.wxml，可以动态的控制星星的大小

！-(尺寸*星星。长度（尺寸/2) * 4 20)这里的话，是在可以点击的时候，加上了好评的字体的长度-view class=' starsBox ' style=' width : { { isClick？(大小*星星。长度(尺寸/2)* 4 20):(尺寸*星星。length)} } rpx；'height : { { size } } rpx ' view class=' stars ' style=' width : { { size * stars }。长度} } rpx'height : { { size } } rpx ' block wx : for=' { { stars } } ' wx : key=' { { index } } ' image src=' http :/images/{ { item==0？grayStar':item}} .png " style=" width : { { size } } rpx；height : { { size } } rpx ' data-index=' { { index } } ' catch tap=' computeScore '/image/block/view wx : if=' { { isClick } } ' class=' text ' style=' font-size : { { size/2 } } rpx；text wx : if=' { { value==' 0 ' } ' class=' point text '暂无评分/text text wx : elif=' { { value==' 1 ' } ' class=' point text '差评/text text wx : elif=' { { value ' 4 ' } ' class=' point text '中评/text text wx : else class=' point text '好评/文本/视图/视图子组件index.wxss。star box { display : flex align-items :居中；正义-内容： flex-start；}.星形{ width: 150rpx高度： 50 rpxdisplay : flex align-items :居中；正义-内容： flex-start；}.恒星图像{ width : 30 rpx h8 : 30 rpx }。文本{ color: # ccc左边距left: 20rpx}子组件index.js

组件({属性： { /*显示有色星星的个数*/value: { type: Number，value: 0，/*监听价值值的变化*/observer:函数(newVal、oldVal、changedPath) { this.init() }，/*设置星星大小*/size: { type: Number，value: 30 }，/*是否可点击，类型为空表示值可以是任意类型*/isClick: { type: null，value: false } }，附加(){ /*组件生命周期函数，在组件实例进入页面节点树时执行*/这个。init()；}，数据： { star :[0，0，0，0，0] }，方法： { init(){让star=this。属性。价值；让星星=[0,0,0,0,0];/* 图片名称，通过设置图片名称来动态的改变图片显示*/for(让I=0；一、数学楼（星);I){ stars[I]=' star '；} if(star math。地板(星星)){星星[数学。楼(星)】='半星'；}对于(让I=0；我星星。长度；I){ if(stars[I]==0){ stars[I]=' gray star '；} } this.setData({ stars }) }，/*可点击时，用于计算分数*/computeScore(e){ let index=e . CurrentTarget。数据集。指数；让isClick=这个。数据。isClickif(isClick){ let score=index 1；this.triggerEvent('compute '，{ score })；} } }})3.父组件中引用

父组件index.wxml

view class=' score ' view class=' score item '分数值=' { { shopGrade } } ' size=' 46 ' isClick=' true ' bind compute=' compute grade '/view view class=' score item ' score值=' { { shopGrade 1 } } ' size=' 46 '/view/view父组件index.json

{ '使用组件' : { ' score ' : '/COmmittee/score/index ' } }父组件index.js

数据： {商店等级： 0,商店等级1: 4.6 },},/*评分处理事件*/计算等级(e){让分数=e . detail。分数；这个。setdata({ shopigrade : score })}，4.vue中使用挽救(保存的简写)实现评分

首先在某视频剪辑软件使用的index.html的模板文件中添加一个雷姆转换算法，因为我后面用的单位是雷姆

/* 在头部添加*/script type=' text/JavaScript '文档。getelementsbytagname(' html ')[0]。风格。font size=100/750 *窗口。屏幕。宽度' px '；/script然后添加svg.vue文件，这个挽救(保存的简写)文件可以自己找图片生成，并设置对应的编号

模板SVG xmlns=' http://www .w3。org/2000/SVG ' xmlns : xlink=' http://www .w3。org/1999/xlink ' style=' position : absolute；宽度：0;高度：0;可见性：隐藏的定义符号id=' star ' viewBox=' 0 0 32 32 ' path class=' path 1 ' d=' M16 26.382 l-8.16 4.992 c-1.5 0.918-2.382 0.264-1.975-1.435 l 2.226-9.303-7.269-6.218 c-1.337-1.143-0.26文件引用svg.vue

模板div class=' rating star '部分class=' star _ container ' SVG class=' grey _ fill ' v-for='(num，index)在5' :key='index '中使用xmlns : xlink=' http://www。w3。org/1999/xlink ' xlink : href=' # star ' rel=' external no follow ' rel=' external no follow '/use/SVG/section div class=' star _ overflow ' 3333330 rating star { position : relative；宽度： 100%;星溢出{ overflow:隐藏；相对位置：高度： 0.65雷姆；} .星形容器{位置：绝对值；top: 0.05rem宽度： 1毫米；display : flex justice-content : flex-start；align-items:居中；灰色_填充{宽度： 0.94毫米高度： 0.2毫米；填写： # D1 D1；} .橙色_填充{宽度： 0.94毫米高度： 0.2毫米；fill: # ff9a0d} } }/样式总结

以上所述是小编给大家介绍的微信小程序中的店铺评分组件及某视频剪辑软件中用挽救(保存的简写)实现的评分显示组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！