mpvue 小程序 Rate 星级评分

mpvue 小程序 Rate 星级评分

目录

用 [TOC]来生成目录：

---

长话多说，mpvue -weui中是这么说的：

• Rate 组件使用 html5 中 data- 属性实现，当点击评分区域时，获取 data 属性的值，然后通过 vue 中 :class 控制评分星星的状态，即是否为 active。
  道理大家都懂，通过点击事件改变那个星星的 属性。

但是

---

先看mpvue-ui的代码

<template>
    <div class="page__bd">
      <div class="weui-cells__title">点击评分div>
      <div class="weui-cells__title">{{rateScore}}div>
      <div class="weui-rate-wrap">
        <ul class="weui-rate">
          <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= tempValue}" :data-index='index' @click="selectRate">
            <div class="weui-rate-item-def">div>
          li>
        ul>
      div>
    div>
  div>
template>

<script>
export default {
  data() {
    return {
      max: 5,
      rateScore: '',
      rateScoreDesc: ['非常不满意，各方面都很差', '不满意，比较差', '一般，还需改善', '比较满意，仍可改善', '非常满意,无可挑剔'],
      tempValue: 3
    }
  },
  methods: {
    selectRate(e) {
      this.tempValue = e.mp.currentTarget.dataset.index;
      this.rateScore = this.rateScoreDesc[this.tempValue];
    }
  }
}
script>

<style>
style>

简短明了，，直接拿过来copy，发现 星星没有出现啊！！！
啥情况？
后来你发现，weui.css 里并没有 weui-rate-wrap 这个样式，也没有 weui-rate-item这个样式，当然也没有weui-rate-item-active 这个样式。
真尴尬，没法用啊，去gitlab上看最新源码里面也没有这些样式。
真蛋疼。

so

其实你已经懂原理了对不对
其实就是改变下星星的状态对不对，我点一下，它就变成亮的星星，
所以呢，
从网上下载两个图片一个亮星星，一个不亮星星。
给大家分享一个 阿里的图标库：
http://www.iconfont.cn/search/index?q=%E6%98%9F%E6%98%9F
有很多星星，下载的时候可以改变颜色

、、、
下面是代码仅供参考
样式问题自己调整

<template>
    <div class="page__bd">
      <div class="weui-cells__title">点击评分div>
      <div class="weui-cells__title">{{rateScore}}div>
      <div class="weui-rate-wrap">
          <ul class="weui-rate">
            <li class="weui-rate-item" v-for="(item,index) in max" :key="index"  @click="selectRate(index)">
              <img style="width:25px;height:25px; float: left;padding-right: 20px" v-if="index <= tempValue" :src="$$imagePath + 'rateon.png'"/>
              <img style="width:25px;height:25px; float: left;padding-right: 20px" v-else :src="$$imagePath + 'rate.png'"/>
            li>
          ul>
        div>
    div>
  div>
template>

<script>
export default {
  data() {
    return {
      order_detail:{},
        max: 5,
        rateScore: '',
        rateScoreDesc: ['非常不满意，各方面都很差', '不满意，比较差', '一般，还需改善', '比较满意，仍可改善', '非常满意,无可挑剔'],
        tempValue: -1,
    }
  },
  computed: {
      $$imagePath() {
        return this.$imagePath
      },
    },
  methods: {
    selectRate(e) {
        console.log("e:"+e)
        this.tempValue = e;
        this.rateScore = this.rateScoreDesc[this.tempValue];
      },
  }
}
script>

<style>
  .weui-form-preview {
    margin-bottom: 25px;
  }
.weui-rate-item{
    display:inline-block;
    padding-right: 30px;
    width: 10px;
    height: 10px;
  }
style>

---

main.js{
Vue.prototype.$imagePath = ‘../../static/’ // 图片路径
}