Comments (3)
看了源码,大概找到原因了。这样的实现方式着实让人难以理解。
.van-stepper__minus:before,
.van-stepper__plus:before {
height: 1px;
width: 9px
}
.van-stepper__minus:after,
.van-stepper__plus:after {
height: 9px;
width: 1px
}
.van-stepper__minus:empty.van-stepper__minus:after,
.van-stepper__minus:empty.van-stepper__minus:before,
.van-stepper__minus:empty.van-stepper__plus:after,
.van-stepper__minus:empty.van-stepper__plus:before,
.van-stepper__plus:empty.van-stepper__minus:after,
.van-stepper__plus:empty.van-stepper__minus:before,
.van-stepper__plus:empty.van-stepper__plus:after,
.van-stepper__plus:empty.van-stepper__plus:before {
background-color: currentColor;
bottom: 0;
content: "";
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
通过以上css代码可以知晓加减号分别是由van-stepper__plus
和van-stepper__minus
的before和after实现的。before是横,after是竖(通过定义他们的高和宽实现的)。真机中不显示的原因是因为真机上不兼容background-color: currentColor;
,即加减号的颜色是before和after的背景色,背景色又是跟前景色一样(currentColor)。但很可惜小程序不兼容CSS3中的currentColor
。
解决办法
修改为直接作用在背景色,而不是前景色上
.van-stepper__minus:empty.van-stepper__minus:after,
.van-stepper__minus:empty.van-stepper__minus:before,
.van-stepper__minus:empty.van-stepper__plus:after,
.van-stepper__minus:empty.van-stepper__plus:before,
.van-stepper__plus:empty.van-stepper__minus:after,
.van-stepper__plus:empty.van-stepper__minus:before,
.van-stepper__plus:empty.van-stepper__plus:after,
.van-stepper__plus:empty.van-stepper__plus:before {
background-color: var(--stepper-button-icon-color, #323233);
bottom: 0;
content: "";
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0
}
/* 禁用时的颜色 */
.van-stepper__minus--disabled.van-stepper__minus:empty.van-stepper__minus:before,
.van-stepper__plus--disabled.van-stepper__plus:empty.van-stepper__plus:before,
.van-stepper__plus--disabled.van-stepper__plus:empty.van-stepper__plus:after {
background-color: var(--stepper-button-disabled-icon-color, #c8c9cc)
}
希望官方能解决一下这个bug
from vant-weapp.
补充一下 是在skyline渲染模式下会出现该问题
from vant-weapp.
补充一下 是在skyline渲染模式下会出现该问题
目前还未统一支持 skyline 模式。后面会考虑统一支持。
from vant-weapp.
Related Issues (20)
- [Feature Request] vant 3中的List功能,瀑布流滚动加载,用于展示长列表
- 真机预览组件不能显示的问题 HOT 1
- 急需适配skyLine模式,现有功能不能适配skyLine模式,造成样式基本或完全失效 HOT 2
- 引入组件后提示 alicdn报错??请尽快修复 HOT 2
- dialog弹出层为啥确定按钮点击会自动关闭弹窗?那你们的show属性的作用是什么? HOT 1
- [Bug Report] van-toast 会被被 van-dialog 挡住,我已经给van-toast设置了很高的zIndex 仍未解决 HOT 1
- [Bug Report] 使用vant-skeleton组件时实时渲染的问题 HOT 1
- vant radio组件使用自定义 图标时,选择框无法显示 HOT 2
- [Bug Report] van-field bindinput事件在ios端,只进行一次输入却被多次触发
- [Bug Report] ActionSheet 动作面板小米14pro兼容
- cascader 组件显示异常
- van-circle 组件在iPhone 上切到后台再切回来有概率整个画布变成黑色
- 微信小程序,van-radio使用问题
- Field 输入框 外部样式类 不生效
- van-stepper组件的bind:focus等事件文档中写了,实际无效,希望能补上
- [Bug Report] 微信开发者工具中很多组件无法正常显示 HOT 1
- van-notice-bar滚动速率不一致
- van-popup 内容展示位置,在小程序开发工具和真机上展示位置不一样 HOT 2
- [Bug Report] 请在此填写标题
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vant-weapp.