Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在真机上,vant的圆环进度条显示有问题 #5963

Open
daipianpian opened this issue Jan 24, 2025 · 1 comment
Open

在真机上,vant的圆环进度条显示有问题 #5963

daipianpian opened this issue Jan 24, 2025 · 1 comment

Comments

@daipianpian
Copy link

重现链接

index.wxml内容如下:
`

打开弹窗

`

Vant Weapp 版本

1.11.7

描述一下你遇到的问题。

在真机上,vant的圆环进度条有问题,圆环是用canvas实现的,圆环里面的文字盒子用的是cover-view,这个组件的层级太高了。如果其上有弹窗或者其他,圆环进度条还是在最上面。

重现步骤

1.点击按钮出现弹窗,弹窗在圆环进度条上方;
2.会看到圆环进度条在弹窗的上面。希望达到的效果是在弹窗的下面。

设备/浏览器

No response

@daipianpian
Copy link
Author

代码如下:
index.wxml:

<!--index.wxml-->
<view class="van-circle-wrap">
  <van-circle value="{{ 70 }}" text="70%" />
</view>

<view class="button-wrap">
  <van-button type="default" bindtap="openDialog">打开弹窗</van-button>
</view>


<van-dialog id="van-dialog" />

index.js:

// index.js
import Dialog from '@vant/weapp/dialog/dialog';

Page({
  data: {
    value: 70
  },
  openDialog() {
    Dialog.alert({
      title: '标题',
      message: '代码是写出来给人看的,附带能在机器上运行',
    }).then(() => {
      // on close
    });
  },
})

index.wxss:

/**index.wxss**/
page{background-color: #F7F8FA;}
.van-circle-wrap{display: flex; justify-content:center; margin-top: 260px;}
.button-wrap{display: flex; justify-content:center; margin-top: 20px;}

index.json:

{
  "usingComponents": {
    "van-circle": "@vant/weapp/circle/index",
    "van-dialog": "@vant/weapp/dialog/index",
    "van-button": "@vant/weapp/button/index"
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant