Taro小程序自定义圆形进度条progress

最新推荐文章于 2023-11-01 11:36:36 发布

原创最新推荐文章于 2023-11-01 11:36:36 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#taro #小程序

前端技术专栏收录该内容

5 篇文章

订阅专栏

博客主要涉及Taro小程序代码的使用相关内容，聚焦于信息技术领域中小程序开发方面的代码实践。

代码


import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Canvas,Text } from '@tarojs/components'
import './progress.scss'

type PageOwnProps = {}

type PageState = {}

type PageStateProps = {
    data: string
    color:string
    progress:SVGAnimatedNumberList
}
type PageDispatchProps = {
    show: () => void
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface RoundProgress {
    props: IProps;
}
let windowWidth // 可使用窗口宽度
let windowHeight // 可使用窗口高度
let ratio // 根据尺寸动态计算 1px换算成多少rpx
class RoundProgress extends Component<{}, RoundProgress> {

    static defaultProps = {
        data: '心理资本',
        color:'#7D79F3',
        progress:0,
    }
    
    componentDidMount() {
        this.drawProgressbg(this.props.progress);
    }


    //绘制背景
    drawProgressbg(step) {
        Taro.getSystemInfo({
            success:res=>{
                console.log(res);
                windowWidth=res.windowWidth
                windowHeight=res.windowHeight
                    // 屏幕宽度 375px = 750rpx，1px=2rpx
                    // 1px = （750 / 屏幕宽度）rpx；
                    // 1rpx = （屏幕宽度 / 750）px;
                ratio= 750 / windowWidth
            }
        })
                // console.log(windowWidth+'======'+windowHeight+'======ratio:'+(60/ratio))

        // 使用 .createContext 获取绘图上下文 context
        const ctx = Taro.createCanvasContext('canvasProgressbg', this)
        ctx.setLineWidth(4);// 设置圆环的宽度
        ctx.setStrokeStyle(this.props.color); // 设置圆环的颜色
        ctx.setLineCap('butt') // 设置圆环端点的形状
        ctx.beginPath();//开始一个新的路径
        ctx.arc(69/ratio, 69/ratio, 60/ratio, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);//x,y,半径,开始,结束
        ctx.stroke();//对当前路径进行描边
        ctx.draw();
        
    }

    render() {
        return (
            <View className='progress_box'>
                <Canvas className="progress_bg" canvasId="canvasProgressbg">  </Canvas>
                <Canvas className="progress_canvas" canvasId="canvasProgress">  </Canvas>
                <View className="progress_text">
                    <Text className='progress_info'> {this.props.data}</Text>
                </View>
            </View>
        )
    }
}

export default RoundProgress as ComponentClass<PageOwnProps, PageState>

使用：

								<RoundProgress
                                    className="progress"
                                    data={item.status}
                                    progress='0.3'
                                    color== '#7D79F3'></RoundProgress>