先放效果图,如下:
1. wxml文件代码如下
对于圆形进度条中间的文字,如果是简单的,可以用它自带的属性去填充。 比较复杂的,就可以像下面,通过样式将文字定位到圆形进度条中间合适位置。
<view class='circlePage'>
<view class='wrap'>
<!-- 圆形中间的文字 -->
<view class="circleText">
<text class='num'>{
{total}}</text>
<view class='line'></view>
<text class="text">总数量</text>
</view>
<!-- 第一个canvas用于绘制白色圆形 第二个canvas用于绘制橙色圆形进度条 -->
<canvas canvas-id='canvas' class="canvas progress"></canvas>
<canvas canvas-id='canvas_p' class="canvas" />
</view>
</view>