前言

產(chǎn)品出了新的UI论颅，需要漸變的進(jìn)度條來呈現(xiàn)砍價(jià)進(jìn)度询微。在小程序外的HTML似袁，直接使用css3就能實(shí)現(xiàn)，且有直觀的動(dòng)畫效果仑荐；而在小程序本身也提供了進(jìn)度條的組件，但是卻沒有提供漸變顏色的接口纵东≌痴校看來只好自己實(shí)現(xiàn)了。

實(shí)現(xiàn)過程

思路

1偎球、構(gòu)建progress組件
2洒扎、使用css實(shí)現(xiàn)顏色漸變
3、使用setInterval實(shí)現(xiàn)動(dòng)畫效果

在pages下建立以下文件

├─components
│  └─progress
│          progress.js
│          progress.json
│          progress.less
│          progress.wxml
│          progress.wxss

progress.json

{
    "component": true
}

progress.wxml

需定義的屬性：圓角大小衰絮、高度袍冷、長度、漸變起始顏色猫牡、填充背景顏色

<view style="width:100%;background-color: {{fill}};border-radius:{{radius}}px">
    <view style="border-radius:{{radius}}px;height: {{height}}px;background: -webkit-linear-gradient(right, {{from}}, {{to}});width:{{width}};"></view>
</view>

progress.js

Component({
    properties: {
        bar: {
            // bar: {
            //   height: 30,
            //   color: ["#fecb24", "#ffff00"],
            //   value: 100,
            //   radius: 10,
            //   fill: "red"
            // }
            type: Object,
            observer: "_change"
        }
    },
    data: {
        begin: 0, //進(jìn)度條起始值
        height: 0,//進(jìn)度條高度
        from: "green",//默認(rèn)顏色
        to: "green",//默認(rèn)顏色
        interVal: null,//清除周期函數(shù)使用
        width: "",//進(jìn)度百分比
        fill: "black",//精度條填充顏色
        radius: 0//圓角邊框值

    },
    detached() {
        //摧毀倒計(jì)時(shí)
        if (this.data.interVal !== null) clearInterval(this.data.interVal);
    },
    methods: {
        _change(bar, oldVal) {
            let from = "green";
            let to = "green";
            if (bar.color !== undefined) {
                if (bar.color.length == 2) {
                    from = bar.color[0];
                    to = bar.color[1];
                } else if (bar.color.length == 1) {
                    from = to = bar.color[0];
                }
            }
            let radius = 0;
            if (bar.radius !== undefined) {
                radius = bar.radius;
            }
            let fill = "black";
            if (bar.fill !== undefined) {
                fill = bar.fill;
            }

            this.setData({
                height: bar.height,
                from: from,
                to: to,
                radius: radius,
                fill: fill
            });
//實(shí)現(xiàn)進(jìn)度條動(dòng)畫效果
            let interVal = setInterval(() => {
                let begin = this.data.begin;
                let max = bar.value;
                if (max == 0) {
                    this.setData({
                        width: "0%"
                    });
                }
                if (begin < max) {
                    let increment = 1;
                    if (max > 20 && max <= 40) {
                        increment = 2;
                    } else if (max > 40 && max <= 60) {
                        increment = 3;
                    } else if (max > 60 && max <= 100) {
                        increment = 4;
                    }

                    let now = begin + increment;

                    this.setData({
                        begin: now,
                        width: (now > max ? max : now) + "%",
                        interVal: interVal
                    });
                } else {
                    clearInterval(this.data.interVal);
                }
            }, 30);
        }
    }
});

使用方法

在使用的文件的json中胡诗，加入

    "usingComponents": {
        "progress": "/pages/components/progress/progress"
    }

在wxml中，加入

<view class="progress">
    自定義顏色漸變進(jìn)度條
    <progress bar="{{bar}}"></progress>
</view>

在js中的data淌友，設(shè)置進(jìn)度條配置數(shù)據(jù)

 bar: {
      height: 20,//進(jìn)度條高度
      color: ["#fecb24", "#ffff00"],//漸變顏色起始顏色煌恢，終止顏色
      value: 70,//進(jìn)度條百分比
      radius: 10,//圓角
      fill: "red"http://進(jìn)度條背景顏色
    }

最終效果

progress.gif

進(jìn)度條效果