vant 组件的（circle）兼容性问题

最新推荐文章于 2024-07-03 04:04:17 发布
最新推荐文章于 2024-07-03 04:04:17 发布
阅读量3.9k 收藏 5
点赞数 3
分类专栏： vue vant 文章标签： vue vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongyafang123/article/details/105230207
版权
vue 同时被 2 个专栏收录
29 篇文章 0 订阅
订阅专栏
vant
1 篇文章 0 订阅
订阅专栏

本来要写一个音频播放的倒计时圆圈⭕️动效；很庆幸，vant里面有提供！贼开心

然后就算音频时间，对应圆圈转动速度，很完美的写完了！可是第二天测试人员给我反馈说，iOS11的手机进度圆圈错位了！ what 什么鬼 为什么为什么

这也没有什么的单独设置啊

结果一顿百度啊！最终找到了答案

谁能想到和全局设置字体样式有关， postcss-pxtorem

在node_modules —— postcss-pxtorem —— index.js文中，在selectorBlackList里加上’van-circle__layer’ 即可完美解决！亲测有效，

有帮助的请帮我点赞呦！

具体如下图设置：

在这里插入图片描述

小雍雍
关注
专栏目录
记录Vant circle 踩坑
weixin_43822134的博客
09-16 5468
最近这家公司的一款app用的Vant-UI，说实话之前并没怎么接触过Vant，在开发的过程中踩了不少没经验的坑。其他的都还好，坑最多的其中必须要有circle的名号。 circle-环形进度条 在官方文档里只有部分API的例子，而且对于部分最常用的API的介绍并不很详细，比如v-model、rate。 其中文档中给出 v-model 为当前进度，rate为目标进度 而与此同时官网给的例子就让人看不懂了。 此时v-model为0，rate为30，但进度条显示为70% 没办法，自己写代码自己试，发现自己写也
Vant 组件中的 Circle 环形进度条
Love_Fish_Young的博客
08-12 4741
Vant 组件中的 circle 环形进度条，进度条随时间增加动态变化
vant组件加入了wxml中为什么显示不出来？
最新发布
克里斯蒂亚诺更新的博客
07-03 151
【代码】vant组件加入了wxml中为什么显示不出来？
van-circle显示错误 位置偏移
Young_Gao的博客
08-14 2249
postcss-pxtorem 导致的问题。 我的是nuxt的框架，解决方式为 van-circle 位置错乱 在nuxt.config.js->postcss-pxtorem 的配置中添加 selectorBlackList: ['van-circle__layer'] postcss: [ require('postcss-pxtorem')({ ...
vant Circle 环形进度条写一个倒计时组件
HDdgut的博客
03-29 655
【代码】vant Circle 环形进度条写一个倒计时组件。
Vant 环形进度条Canvas 层级问题
Florenza的博客
12-15 1127
【代码】Vant 环形进度条Canvas 层级问题。
记录Vant circle注意事项
weixin_44446394的博客
07-26 1318
circle-环形进度条 因为项目需要，在同一个页面需要显示不同的进度条，开始按照文档写的时候，是怎么都是同步的，后来边做边测试。最终实现效果，二话不说，上代码。没有上全，只是一部分,这里我有一个数据循环，因为太长了，没有写出来，answerItem.answerAgreeCount 这个就是循环的那个数据，且currentRate[answerindex] 这个值是在循环的里面加进去的，这里是关键，注意了，这里虽然是动态绑定的v-model，但是这里不能加：！！！！，这是真的坑，动态绑定的数据，不能加：也
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过...
vant组件小程序版 适用小程序
09-01
Vant组件库是专门为移动端开发设计的一套UI框架，它源于滴滴出行的开源项目，旨在提供轻量、易用且高度可定制的组件，适用于快速构建高质量的移动应用。在小程序开发领域，Vant WeApp是Vant组件库的一个版本，专为...
小程序引入vant组件（已解决）
01-03
我找到方法了，你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除，之后再https://github.com/youzan/vant-weapp下载一份vant， 将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到 ...
详解VUE项目中安装和使用vant组件
10-17
vant组件库拥有超过50个经过有赞线上业务检验的组件，这保证了组件的可靠性和实用性。单元测试覆盖率超过90%，确保了组件的质量。它还提供了完善的中英文文档和示例，使得开发者可以更方便地查阅和学习如何使用。...
倒计时环形进度条
04-02
基于github上环形进度条修改，增加倒计时功能，具体调用参考代码
微信小程序vant弹窗组件的实现方式
10-15
【微信小程序vant弹窗组件的实现方式】 在前端开发中，弹窗组件是常见的交互元素，用于提供信息提示、用户确认、数据输入等场景。Vant Weapp 是由有赞团队开发的一款专为微信小程序设计的UI组件库，它提供了灵活、...
Vant2 van-circle自定义文字内容？
SM_Cute的博客
06-20 1105
Vant2 van-circle自定义文字内容？
vue2前端中vant2中的唤醒组件van-circle掉坑
YingUser的博客
08-29 1935
前端 vant2 组件的环形组件掉坑
vant组件库的使用 - - - vue2篇&小程序篇
sywdebug的博客
12-07 9336
在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。
vue前端开发使用vant遇到的坑
weixin_42383047的博客
04-22 5146
需求：vue+Vant项目实现一个计时功能，显示时分秒并且周围圆环变化，选用了Vant Circle组件，版本是^1.6.15。 bug：Circle组件在移动设备上的显示出现偏移。 场景：项目引用了rem(postcss-pxtorem)，开发后发现 计时器圆环 在iphone6及iphoneX显示正常，在其它机型或安卓端都会出现偏移。 原因：vant的源码里面要将transform-ori...
vue3.0项目中运用vant的以及移动端的适配
chengcheng9876的博客
04-25 2228
vue3.0项目中运用vant的以及移动端的适配
uniapp解决canvas画圆环，层级过高挡住其他元素，解法1（polygon+遮罩）
qq_42484025的博客
08-26 1734
<template> <view class="progress_box" @click="secondDuce()"> <view id="circleBg" class="circleBg"> <div class="circleBg-center"></div> </view> <view id="circle" class="circle" :style="clipPathStyle
vant组件引入不显示
07-28
关于Vant组件引入不显示的问题，可能有几个原因导致。以下是一些常见的解决方法： 1. 确保您已经正确地安装了Vant组件库。您可以使用npm或yarn等包管理器安装Vant，然后在您的项目中引入它。 2. 确保您在使用Vant...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值