vue.js实现砍价进度条（超详细）

超、凢脫俗 2023-05-28 12:57 13阅读 0赞

很简单，我们这里直接上代码了，亲测可用

主要代码： <progress v-bind:value="cuts" max="100" class="cut\_progress"></progress>

progress 标签

<div class="cut_ope">
        <progress v-bind:value="cuts" max="100" class="cut_progress"></progress>
        <div class="cut_money">
            <span>已砍<label v-text="yikan">18.05</label>元</span>
            <span>还可砍掉<label v-text="kekan">5.25</label>元</span>
    	</div>
    </div>

css

.cut_progress {
        width: 100%;
        height: 0.26rem;
        background: #eee;
        border-radius: 0.2rem;
    }
    /* 表示总长度背景色 */
    .cut_progress::-webkit-progress-bar{
        background: #eee;
        border-radius: 0.2rem;
    }
    /* 表示已完成进度背景色 */
    .cut_progress::-webkit-progress-value{
        background-image: linear-gradient(#fcc943, #f48213);
        border-radius: 0.2rem;
    }
    .cut_money {
              overflow: hidden;
            }
            .cut_money span {
              font-size: 0.28rem;
              color: #f12816;
              float: left;
            }
            .cut_money span:nth-child(2) {
              float: right;
              color: #333;
            }

js

var vm = new Vue({
    
        el: "#app",
        data: {
            cuts: "",
        },
        methods: {
    
          //获取数据
          init: function() {
            api.ajax({
    					url: "",
    					method: 'post',
    					data: {
    						values: {
    							token: vm.token,
    						}
    					}
    				}, function(ret, err) {
                if (ret.code == 'success') {
                  vm.user_avatar = ret.data.user_avatar;
                  vm.user_nickname = ret.data.user_nickname;
                  vm.goods_name = ret.data.goods_name;
                  vm.youhui = ret.data.youhui;
                  vm.yikan = ret.data.yikan;
                  vm.kekan = ret.data.kekan;
                  vm.bouns_code = ret.data.bouns_code;
                  vm.add_time = ret.data.add_time;
                  vm.goods_img = ret.data.goods_img;
                  vm.haggling = ret.data.haggling;
                  vm.cuts = vm.yikan / vm.youhui * 100;
                  vm.changeTime();
                }else{
                  toast(ret.msg);
                }
            });
          },
        },
    })

以上是所有代码,有什么问题可以随时下方留言,如果对你有帮助,记得关注哦!!!谢谢大家支持

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java实现进度条

Java实现进度条在Java编程中，经常需要显示进度条来表示任务的完成进度。进度条是一种直观的方式，可以让用户了解到程序运行的状态。本文将介绍如何使用Java实现一个简单的

水深无声/ 2023年10月15日 15:47/ 0 赞/ 41 阅读

相关实现环形进度条

<view class="circleProgress_wrapper"> <view class="text">{ {proText}

- 日理万妓/ 2023年07月15日 11:24/ 0 赞/ 14 阅读

相关 vue.js实现砍价进度条（超详细）

很简单，我们这里直接上代码了，亲测可用主要代码： <progress v-bind:value="cuts" max="100" class="cut\_progress"

超、凢脫俗/ 2023年05月28日 12:57/ 0 赞/ 14 阅读

相关 python 进度条 tqdm_详细介绍Python进度条tqdm的使用

详细介绍Python进度条tqdm的使用来源：中文源码网浏览：次日期：2019年11月5日【下载文档: 详细介绍Python进度条tqdm的使用.t

太过爱你忘了你带给我的痛/ 2023年01月01日 05:58/ 0 赞/ 250 阅读

相关实现简易进度条

法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

傷城~/ 2022年12月13日 04:54/ 0 赞/ 223 阅读

相关 CSS实现进度条和订单进度条 (实用、赞）

原文出处：[CSS实现进度条和订单进度条 - 郭锦荣 - 博客园][CSS_ - _ -] 效果图如下： ![watermark_type_ZHJvaWRzYW5zZmF

女爷i/ 2022年09月14日 14:23/ 0 赞/ 278 阅读

相关 python实现进度条

import sys import time def view\_bar(num, total): rate = num / total r

怼烎@/ 2022年06月09日 07:19/ 0 赞/ 376 阅读

相关 JS实现进度条

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。 <!DOCTYPE html> <html>

约定不等于承诺〃/ 2022年06月09日 03:24/ 0 赞/ 305 阅读

相关 Linux下实现进度条和彩色进度条

一、普通进度条 include <stdio.h> include <unistd.h> int main() {

雨点打透心脏的1/2处/ 2022年05月25日 03:44/ 0 赞/ 371 阅读

相关 uniapp 电商app进度条组件的使用（砍价进度条处理）

最近公司的电商app需要做一个砍价的功能，具体UI如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

傷城~/ 2021年07月25日 12:06/ 0 赞/ 1388 阅读