Xxblin 2021-06-01 10:04 采纳率: 100%
浏览 43
已采纳

简单的星星评分组件,我陷进去了...求解答一下

<view>

    <view class="eval_box">

      <view v-for="(item, index) in ratetext" :key="index" class="rate_box">

        <text class="tx_wb">{{ item }}</text>

        <!-- for五条介绍 -->



        <view class="star_box">

          <view

            class="StarsWrap"

            v-for="(i, index) in list"

            :key="index"

            @click="clickStars(index)"

          >

            <!-- for 五个星星 -->

            <image :src="xing > index ? stara : starb"></image>

            <!-- 判断点的星星是第几个 大于的话用亮星 -->

          </view>



          <text style="color: #ff6200; font-size: 26rpx">{{

            rateScoreText

          }}</text>

        </view>

      </view>

    </view>
export default {
  name: "evaluate",
  data() {
    return {
      rateScoreText: "",
      rateScoreDesc: ["很不满意", "稍不满意", "一般", "满意", "很满意"],
      ratetext: [
        "送货司机",
        "搬运员工",
        "业务经理",
        "商品质量",
        "商品价格",
        "产品交货期",
      ],

      stara: "./../../static/image/20200708144629175.png", //亮星星
      list: [{
        scoredesc:'很不满意',
        xing:0
      },
      {
        scoredesc:'稍不满意',
        xing:1
      },
      {
        scoredesc:'一般',
        xing:2
      },
      {
        scoredesc:'满意',
        xing:3
      },
      {
        scoredesc:'很满意',
        xing:4
      },
      ],
      starb: "./../../static/image/20200708144629178.png", //暗星星
      xing: 0,
    };
  },
  methods: {
    clickStars(i) {
      this.rateScoreText = this.list[i].scoredesc;
      this.xing = i + 1;
      console.log(this. xing)
      // console.log("点击了" + (i + 1) + "颗星");
    },

我for出来 一点全亮了 我想一行归一行的去走..啥原因啊

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-06-01 10:11
    关注

    xing应该存储到ratetext项对应的xing中,而不是所有的ratetext项都是用同一个xing,这样肯定是点击一个其他ratetext的项也变化了

    大概改了下结构,对你有可以点击采纳支持下吗,谢谢~~有问题可以继续问,主要看加粗和下划线的地方

    <view>
        <view class="eval_box">
            <view v-for="(item, rateindex) in ratetext" :key="index" class="rate_box">
                <text class="tx_wb">{{ item.text }}</text>
                <!-- for五条介绍 -->

                <view class="star_box">
                    <view class="StarsWrap"
                          v-for="(i, index) in list"
                          :key="index"
                          @click="clickStars(index,rateindex)">
                        <!-- for 五个星星 -->
                        <image :src="item.xing > index ? stara : starb"></image>
                        <!-- 判断点的星星是第几个 大于的话用亮星 -->
                    </view>

                    <text style="color: #ff6200; font-size: 26rpx">
                        {{
                rateScoreText
                        }}
                    </text>
                </view>
            </view>
        </view>
        <script>
            export default {
                name: "evaluate",
                data() {
                    return {
                        rateScoreText: "",
                        rateScoreDesc: ["很不满意", "稍不满意", "一般", "满意", "很满意"],
                        ratetext: [
                            { text: "送货司机" ,xing:0},
                            { text: "搬运员工", xing: 0 },
                            { text: "业务经理", xing: 0 },
                            { text: "商品质量", xing: 0 },
                            { text: "商品价格", xing: 0 },
                            { text: "产品交货期", xing: 0 },
                        ]
    ,
                        stara: "./../../static/image/20200708144629175.png", //亮星星
                        list: [{
                            scoredesc: '很不满意',
                            xing: 0
                        },
                        {
                            scoredesc: '稍不满意',
                            xing: 1
                        },
                        {
                            scoredesc: '一般',
                            xing: 2
                        },
                        {
                            scoredesc: '满意',
                            xing: 3
                        },
                        {
                            scoredesc: '很满意',
                            xing: 4
                        },
                        ],
                        starb: "./../../static/image/20200708144629178.png", //暗星星
                        xing: 0,
                    };
                },
                methods: {
                    clickStars(i, rateindex) {
                        this.rateScoreText = this.list[i].scoredesc;
                        this.ratetext[rateindex].xing = i + 1;
                        console.log(this.xing)
                        // console.log("点击了" + (i + 1) + "颗星");
                    }
                }
            }
        </script>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥60 用r语言进行数据分析
  • ¥20 关于游戏c++语言代码问题
  • ¥15 如何制作永久二维码,最好是微信也可以扫开的。(相关搜索:管理系统)
  • ¥15 delphi indy cookie 有效期
  • ¥15 labelme打不开怎么办
  • ¥35 按照图片上的两个任务要求,用keil5写出运行代码,并在proteus上仿真成功,🙏
  • ¥15 免费的电脑视频剪辑类软件如何盈利
  • ¥30 MPI读入tif文件并将文件路径分配给各进程时遇到问题
  • ¥15 pycharm中导入模块出错
  • ¥20 Ros2 moveit2 Windows环境配置,有偿,价格可商议。