微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件


Posted in Javascript onNovember 16, 2018

在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分

1.效果图

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

微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星

微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

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

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

<!-- (size * stars.length + (size/2) * 4 + 20 )这里的话,是在可以点击的时候,加上了好评的字体的长度 -->
<view class='starsBox' style='width:{{isClick?(size * stars.length + (size/2) * 4 + 20 ):(size * stars.length)}}rpx;height:{{size}}rpx;'>
 <view class='stars' style='width:{{size * stars.length}}rpx;height:{{size}}rpx;'>
 <block wx:for="{{stars}}" wx:key="{{index}}">
  <image src="/images/{{item == 0 ? 'grayStar':item}}.png" style='width:{{size}}rpx;height:{{size}}rpx;' data-index="{{index}}" catchtap="computeScore"></image>
 </block>
 </view>
 <view wx:if="{{isClick}}" class='text' style='font-size:{{size/2}}rpx;'>
 <text wx:if="{{value=='0'}}" class='pointText'>暂无评分</text>
 <text wx:elif="{{value=='1'}}" class='pointText'>差评</text>
 <text wx:elif="{{value<'4'}}" class='pointText'>中评</text>
 <text wx:else class='pointText'>好评</text>
 </view>
</view>

子组件index.wxss

.starsBox{
 display: flex;
 align-items: center;
 justify-content: flex-start;
}
.stars{
 width: 150rpx;
 height: 50rpx;
 display: flex;
 align-items: center;
 justify-content: flex-start;
}
.stars image{
 width: 30rpx;
 height: 30rpx;
}
.text{
 color: #ccc;
 margin-left: 20rpx;
}

子组件index.js

Component({
 properties: {
 /* 显示有色星星的个数 */
 value: {
  type: Number,
  value: 0,
  /* 监听value值的变化 */
  observer: function (newVal, oldVal, changedPath) {
  this.init()
  }
 },
 /* 设置星星大小 */
 size: {
  type: Number,
  value: 30
 },
 /* 是否可点击,type为null表示值可以是任意类型 */
 isClick: {
  type: null,
  value: false
 }
 },
 attached() {
 /* 组件生命周期函数,在组件实例进入页面节点树时执行 */
 this.init();
 },
 data: {
 stars: [0, 0, 0, 0, 0]
 },
 methods: {
 init() {
  let star = this.properties.value;
  let stars = [0, 0, 0, 0, 0];
  /* 图片名称,通过设置图片名称来动态的改变图片显示 */
  for (let i = 0; i < Math.floor(star); i++) {
  stars[i] = 'star';
  }
  if (star > Math.floor(star)) {
  stars[Math.floor(star)] = 'halfStar';
  }
  for (let i = 0; i < stars.length; i++) {
  if (stars[i] == 0) {
   stars[i] = 'grayStar';
  }
  }
  this.setData({
  stars
  })
 },
 /* 可点击时,用于计算分数 */
 computeScore(e) {
  let index = e.currentTarget.dataset.index;
  let isClick = this.data.isClick;
  if (isClick) {
  let score = index + 1;
  this.triggerEvent('compute', {
   score
  });
  }
 }
 }
})

3.父组件中引用

父组件index.wxml

<view class="score">
 <view class="scoreItem">
  <score value="{{shopGrade}}" size="46" isClick="true" bindcompute="computeGrade" />
 </view>
 <view class="scoreItem">
  <score value="{{shopGrade1}}" size="46" /> 
 </view>
</view>

父组件index.json

{
 "usingComponents": {
  "score": "/component/score/index"
 }
}

父组件index.js

data: {
 shopGrade: 0,
 shopGrade1: 4.6,
},
/* 评分处理事件 */
computeGrade(e) {
 let score = e.detail.score;
 this.setData({
  shopGrade: score
 })
},

4.vue中使用svg实现评分

首先在vue使用的index.html的模板文件中添加一个rem转换算法,因为我后面用的单位是rem

/* 在头部添加 */
<script type="text/javascript">
   document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";
  </script>

然后添加svg.vue文件,这个svg文件可以自己找图片生成,并设置对应的id

<template>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
    <defs>
      <symbol id="star" viewBox="0 0 32 32">
        <path class="path1" d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z">
        </path>
      </symbol>
    </defs>
  </svg>
</template>
<script></script>
<style></style>

rating.vue文件引用svg.vue

<template>
  <div class="ratingstar">
    <section class="star_container">
      <svg class="grey_fill" v-for="(num,index) in 5" :key="index">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star" rel="external nofollow" rel="external nofollow" ></use>
      </svg>
    </section>
    <div class="star_overflow" :style="'width:'+rating*2/10+'rem'">
      <section class="star_container">
        <svg class="orange_fill" v-for="(num,index) in 5" :key="index">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star" rel="external nofollow" rel="external nofollow" ></use>
        </svg>
      </section>
    </div>
    <svgIcon></svgIcon>
  </div>
</template>

<script>
 import svgIcon from '@/components/svg'
 export default {
  components: {
   svgIcon
  },
  data() {
    return {
      rating: 4.2
    }
  },
 }
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .ratingstar {
    position: relative;
    width: 100%;
    .star_overflow {
      overflow: hidden;
      position: relative;
      height: 0.65rem;
    }
    .star_container {
      position: absolute;
      top: 0.05rem;
      width: 1rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .grey_fill {
        width: 0.94rem;
        height: 0.2rem;
        fill: #d1d1d1;
      }
      .orange_fill {
        width: 0.94rem;
        height: 0.2rem;
        fill: #ff9a0d;
      }
    }
  }
</style>

总结

以上所述是小编给大家介绍的微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 #Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 #Javascript
layDate插件设置开始和结束时间
Nov 15 #Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 #Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 #Javascript
layDate日期控件使用方法详解
Nov 15 #Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 #Javascript
You might like
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
初识JQuery 实例一(first)
2011/03/16 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python绘制条形图方法代码详解
2017/12/19 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
个人自荐信
2013/12/05 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
2014财务年终工作总结
2014/12/08 职场文书
督导岗位职责
2015/02/04 职场文书