小程序 on Dapeng Zhang

微信小程序使用技能 - 圆环进度条

Mon, 04 Aug 2025 18:07:31 +0000

圆环进度条的实现，估计在很多应用中都有需要的地方，但是真要自己实现的时候，还是有点棘手的，不过通过资料搜索，自己写了一个
现在记录下，供大家参考使用

<view style="width:429rpx;height:429rpx;position:relative;border-radius:50%;border:14rpx solid #eaeaea;">
	<view style="width:457rpx;height:457rpx;position:absolute;left:-14rpx;top:-14rpx;border:0;">

	 <view style="width:228.5rpx;height:457rpx;overflow:hidden;display:inline-block;position:relative;">
	 <view style="width:429rpx;height:429rpx;border:14rpx solid transparent;border-radius:50%;position:absolute;top:0;border-bottom:14rpx solid green;border-left:14rpx solid green;left:0rpx;transform :rotate({{leftDeg}}deg)"></view>
	 </view>

	 <view style="width:228.5rpx;height:457rpx;overflow:hidden;display:inline-block;position:relative;">
	 <view style="width:429rpx;height:429rpx;border:14rpx solid transparent;border-radius:50%;position:absolute;top:0;border-top:14rpx solid green;border-right:14rpx solid green;right:0rpx;transform :rotate({{rightDeg}}deg)"></view>
	 </view>

	</view>
</view>

数值解释：

429 - 矩形的实际宽度和高度值
457 - 矩形的使用宽度和高度值，加上了矩形的边框值，记住是上下两个边的，所以乘以2 - 429 + （2 * 14）
228.5 - 矩形的使用宽度值一半 457 / 2
14 - 矩形的边的宽度值

这些值可以根据自己的实际使用进行替换

这里比较关键的是如果计算这个角度的问题，网上看了很多的教程，也没有太理解，经过自己的摸索，写了一个函数，只要调用传值就好了。函数如下

function updateCircleDeg(percent) {
 // const percent = 60; // 百分比值
 let rightDeg = 45; // 默认值 - 可以根据需求进行修改
 let leftDeg = 45; // 默认值 - 可以根据需求进行修改

 if (percent < 50) {
 rightDeg = -135 - 180 * ((50 - percent)/50);
 } else if (percent >= 50 && percent <= 100) {
 rightDeg = -135
 leftDeg = -135 - 180 * ((percent) / -50);
 }

 this.setData({
 leftDeg,
 rightDeg,
 });
},

上面的公式很简单，也许有更简单的，一般一个进度条是满格的情况是100%，于是我用100作为参考值，因为这个进度条是分为左边一半，右边一半，所以100被分成了50，其实这个50是左边一个50，右边一个50。我们知道一个圆是360度，一半的话就是180度，于是就有了180的取值，然后180是度数值，50是我们的百分比值，根据需要展示的百分比就能换算出对应的度数了，于是就有了这个公式。应该还好理解。

同理这个50跟100 也可以算成类比其他之类的东东，可以改造为自己需要的
这里的-135是干嘛的，我也不知道，我知道这个是个参考点，当为-135的时候就是左半边跟右半边吻合的时候，有时候不需要了解这个值，你较真你去了解吧。OK

当然也可以做成动画效果。通过下面的方式执行上面的函数就可以了

const percent = 20; // 百分比值
let timer = .1; // 时间刻度值
const time = (50 - percent) / 50 * 1; // 1 表示基础时间值

const intervalTimer = setInterval(() => {
 this.updateCircleDeg(timer);

 if (percent <= timer) {
 clearInterval(intervalTimer);
 }

 console.log(timer);

 timer = parseFloat(parseFloat(timer + .1).toFixed(1));
}, time);

“切换Input，键盘会收起，然后完成切换到下一个input的时候键盘又弹出”问题解决方案

Mon, 04 Aug 2025 18:07:29 +0000

关于微信小程序开发中的一个问题“切换Input，键盘会收起，然后完成切换到下一个input的时候键盘又弹出”，这个问题一直让人很纠结，我在开发中也遇到了此类问题，但是官方一直没有给出一个很好的答案，只是收集并在我们不知道的什么时候可能会给出解决方案，在这个等待过程中，可能会因为一个UI的体验流失一部分用户，这个谁知道呢，技术开发的遇到这个问题还是要想想办法如何解决
我的解决原来是，一个text+textarea，如果以前做过页面开发做个IE的兼容处理，应该遇到过此类问题，原理是一致的
text用来显示我们收入的内容，textarea用来控制输入，并将输入的内容存入要展示的字段中，其实如果是一个输入框的话问题也不大，现在我们要解决我们眼前的问题，就是多个输入框，虽然方案的解决办法实现起来有点复杂但是毕竟能够解决我们的眼前问题。

这里举个例子，以两个输入框为例子

<view bindtap="input1Tap"><text>{{hisTitle}}</text></view><!-- 输入框1-展示内容的假输入框 -->
<view bindtap="input2Tap"><text>{{myTitle}}</text></view><!-- 输入框2-展示内容的假输入框 -->

这里输入框的样式根据自己的UI需求来完善就可以了

然后需要两个textarea，用来接收输入的内容，这个textarea因为要接收输入的内容，同时又要担任键盘弹出来，页面上推的任务，是的输入的内容能够立刻展现出来。

<textarea style="position:absolute;top:604rpx;height:30rpx;left:-999999rpx;" focus="{{textareaNameFocus}}" bindinput="textareaNameInputEvent" value="{{hisTitle}}"></textarea>

<textarea style="position:absolute;top:724rpx;height:30rpx;left:-999999rpx;" focus="{{textareaNickFocus}}" bindinput="textareaNickInputEvent" value="{{myTitle}}" ></textarea>

我这里的两个textarea的top值都不一样，原因是每个textarea的top值的定位，其实恰好定位在了假输入框的下面，这样子看起来就好比输入框就在假的输入框的地方，正好让弹出的键盘知道输入框的位置，实现自动上推页面的功能。这里的值可以根据需求自己去调整，我这里截张图明确下意思

接下来实现textareaNameInputEvent和textareaNickInputEvent两个函数

textareaNameInputEvent: function (e) {
 this.setData({
 hisTitle: (e.detail.value || '').replace(/\r\n/g, '').replace(/\n/g, ''),
 });
},

textareaNickInputEvent: function (e) {
 this.setData({
 myTitle: (e.detail.value || '').replace(/\r\n/g, '').replace(/\n/g, ''),
 });
},

还要实现下input1Tap和input2Tap函数

input1Tap: function () {
 this.setData({
 textareaNameFocus: true,
 textareaNickFocus: false,
 });

 setTimeout(() => {
 this.setData({
 textareaNameFocus: true,
 });
 }, 500);
},

input2Tap: function () {
 this.setData({
 textareaNameFocus: false,
 textareaNickFocus: true,
 });

 setTimeout(() => {
 this.setData({
 textareaNickFocus: true,
 });
 }, 500);
},

这里的setTimeout其实是真正的解决了这个问题的主要原因，真机可能是由于键盘退出出现的之间间隔的设置在iOS和Android上表现不同导致。
最后问题就解决了，不懂的可以加群来问