微信小程序在ios手机端button缺少一条边框及textarea内容无法滚动的问题
最近基于uniapp开发微信小程序 ,遇到了两个坑
1、在ios手机上button会缺少右侧的一条边框
根据官方给出解决办法
.border1rpx, .border1rpx_before{
position: relative;
border-width: 0rpx !important;
padding: 0.5rpx;
z-index: 0;
}
.border1rpx::after, .border1rpx_before::before{
content: "";
border-style: inherit;
border-color: inherit;
border-radius: inherit;
box-sizing: border-box !important;
position: absolute;
border-width: 2rpx !important;
left: 0;
top: 0;
width: 200% !important;
height: 200% !important;
transform-origin: 0 0;
transform: scale(0.5) !important;
z-index: -1;
}
.border1rpx-full { margin: -1rpx; }
- 给.border1rpx的元素设置边框宽度为0
- 给::after伪元素宽高为两倍,边框设置2rpx,
- 边框其他样式继承元素的设置
- 然后再缩放0.5来达到边框为1rpx的效果
2、ios手机端 textarea内容无法滚动
这个问题是因为我的需求是textarea是基于弹出层 uni-popup 而uni-popop组件最外层元素设置了@touchmove.stop.prevent="clear",删除掉即可。
由于我代码已经提交,就用原作者的截图了

浙公网安备 33010602011771号