微信小程序中的店铺评分组件及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 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php查询及多条件查询
2017/02/26 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
python删除文件示例分享
2014/01/28 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python 获取项目根路径的代码
2019/09/27 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
python接入支付宝的实例操作
2020/07/20 Python
列车长先进事迹材料
2014/01/25 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
护理中职生求职信范文
2014/02/24 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
司机岗位职责范本
2015/04/10 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
深入理解 Golang 的字符串
2022/05/04 Golang