微信小程序打造亮眼带刻度简易仪表盘

前端

2022-11-26 09:59:09

自定义微信小程序仪表盘：逐步教程

简介

仪表盘是可视化工具，用于在仪表板上显示数据，以便轻松快速地理解复杂信息。在本文中，我们将指导您如何使用微信小程序框架构建一个简单的仪表盘，显示一个带有进度条的刻度。

创建微信小程序项目

打开微信开发者工具，点击“新建项目”。
选择“小程序”选项，输入项目名称和路径。

添加仪表盘组件

在pages.json文件中，添加仪表盘组件：

{
  "pages": [
    {
      "path": "pages/index/index",
      "component": "pages/index/index"
    }
  ],
  "usingComponents": {
    "progress-bar": "./components/progress-bar/progress-bar"
  }
}

在components目录下创建progress-bar文件夹和progress-bar.wxml文件：

<view class="progress-bar-container">
  <view class="progress-bar">
    <view class="progress-fill" style="width: {{progress}}%;"></view>
  </view>
  <view class="progress-label">{{progress}}%</view>
</view>

添加自定义样式

在components目录下创建progress-bar.wxss文件并添加以下样式：

.progress-bar-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar {
  width: 80%;
  height: 80%;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: relative;
}

.progress-fill {
  width: 100%;
  height: 100%;
  background-color: #007bff;
  border-radius: 50%;
}

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #fff;
}

编写逻辑代码

在pages/index/index.js文件中，添加以下代码：

Page({
  data: {
    progress: 0
  },
  onLoad() {
    setInterval(() => {
      this.setData({
        progress: this.data.progress + 1
      });
    }, 100);
  }
});