微信小程序半圆形，仪表盘效果，纯CSS

TS文件内容

// components/dashboard/dashboard.ts

Component({

    /** 仪表盘

     * 组件的属性列表

     */

    properties: {

        dashboardangle: Number

    },

    /**

     * 组件的初始数据

     */

    data: {

    },

    /**

     * 组件的方法列表

     */

    methods: {

        handerSlider(e: any) {

            let that = this

            let dashboardangle = e.detail.value

            that.setData({

                dashboardangle: dashboardangle

            })

        }

    }

})

Wxml内容

<!--components/dashboard/dashboard.wxml-->

<view style="width: 600rpx; margin: auto;">

    <slider

    block-size="15"

    backgroundColor="#ccc"

    activeColor="#fb8347"

    block-color="#fb8347"

    class="dashboard-slider"

    bindchanging="handerSlider" 

    show-value="true" 

    value="{ {dashboardangle}}" 

    min