欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序中莫名其妙的坑及解决方法

程序员文章站 2024-02-11 17:06:04
...

1.view不能自动换行问题

<!-- 纯数字 -->
<view>1594939392015949393920159392015920159392015920159392</view>
<view style="height:60rpx"></view>

<!-- 纯英文 -->
<view>sdfsgdhsdfgjhgrdfhvretfghjkmlxrdfretfghjkmlxrdflxrdf</view>
<view style="height:60rpx"></view>

<!-- 纯中文 -->
<view>说过的话俯瞰风景规范化刚刚东风风神大公会个百分点怪不得发</view>
<view style="height:60rpx"></view>

<!-- 中文数字 -->
<view>说过的话俯瞰风景规范化1594939392015949312342134234234</view>
<view style="height:60rpx"></view>

<!-- 中文英文数字混合 -->
<view>说过的话俯瞰风景规范化1594939392015949312342134234234vasgdhfdffgnbdsdfghsetger</view>
<view style="height:60rpx"></view>

普普通通的代码,没任何样式, 展示的样子
微信小程序中莫名其妙的坑及解决方法
解决方法:
加上这个样式, 注:适用于纯文本

.word-break{
  word-break: break-all
}

2.ios文本两端对齐问题

在一些表单中可能需要表单项名称两端对齐

  text-align: justify;
  text-align-last: justify; 

在开发者工具中, 以上的确实可以, 可在真机中就没用了…坑爹啊

解决方法:

.title{
  text-align: justify;
  width:140rpx;
  height: 30rpx; // 定高不加高度会变
}
.title::after{
  width: 100%;
  display: inline-block;
  content: '';
}

3.textarea组件层级过高, 浮在遮罩层之上了

由于textarea是原生组件,其他元素z-index改再大也盖不住这个组件,咋整?这边看到2个思路
1.cover-view和 cover-image覆盖其上(官方推荐, 不能满足所有场景, 只能嵌套固定几个组件)
2. 做2个, 一个用来编辑, 一个用来展示, 用wx:if来切换编辑和展示时具体渲染哪个组件

相关标签: JS相关 小程序

上一篇: STL deque容器

下一篇: STL容器之deque