微信小程序在ios手机端button缺少一条边框及textarea内容无法滚动的问题

发布时间 2024-01-12 14:30:51作者: 小武爷

最近基于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; }

 

  1. 给.border1rpx的元素设置边框宽度为0
  2. 给::after伪元素宽高为两倍,边框设置2rpx,
  3. 边框其他样式继承元素的设置
  4. 然后再缩放0.5来达到边框为1rpx的效果

2、ios手机端 textarea内容无法滚动

这个问题是因为我的需求是textarea是基于弹出层 uni-popup  而uni-popop组件最外层元素设置了@touchmove.stop.prevent="clear",删除掉即可。

由于我代码已经提交,就用原作者的截图了