- form组件不能作为flex容器使用
[代码]<[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]form[代码] [代码]class[代码][代码]=[代码][代码]"myForm"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]input[代码] [代码]class[代码][代码]=[代码][代码]"input"[代码] [代码]type[代码][代码]=[代码][代码]"text"[代码][代码]/><[代码][代码]button[代码] [代码]class[代码][代码]=[代码][代码]"btn"[代码][代码]>按钮</[代码][代码]button[代码][代码]>[代码][代码] [代码][代码]</[代码][代码]form[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码][代码].myForm{[代码][代码]display[代码][代码]:flex;flex-wrap:[代码][代码]nowrap[代码][代码]}[代码] [代码].myForm .input{flex:[代码][代码]2[代码][代码];[代码][代码]border[代码][代码]:[代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]black[代码][代码]}[代码] [代码].myForm .btn{flex:[代码][代码]1[代码][代码];[代码][代码]border[代码][代码]:[代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]black[代码][代码]}[代码] 实际效果: [图片] 理想的效果: [图片]
2017-11-07 - textarea放在fixed布局中,框被文字顶起bug
经各种尝试,发现当cursor-spacing设置过高时会遇到该问题。加line-height也会遇到该问题。问题详情如图所示: [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"footer"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]textarea[代码] [代码]maxlength[代码][代码]=[代码][代码]"{{-1}}"[代码] [代码]cursor-spacing[代码][代码]=[代码][代码]"{{30}}"[代码] [代码]fixed[代码][代码]=[代码][代码]"{{true}}"[代码] [代码]class[代码][代码]=[代码][代码]"input-msg"[代码][代码]>[代码] [代码] </[代码][代码]textarea[代码][代码]>[代码] [代码]</[代码][代码]view[代码][代码]>[代码] [代码].footer{[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]fixed[代码][代码];[代码][代码] [代码][代码]bottom[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]left[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]padding-bottom[代码][代码]: [代码][代码]15[代码][代码]rpx;[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]#cccccc[代码][代码];[代码] [代码] [代码][代码].input-msg{[代码][代码] [代码][代码]border[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]black[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]66[代码][代码]rpx;[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]15[代码][代码]rpx [代码][代码]6[代码][代码]rpx;[代码][代码] [代码][代码]}[代码][代码]}[代码]正常输入状态: [图片] 内容过多时候状态: [图片] 测试机型信息: [图片]
2017-11-06 - textarea行末断句问题(IOS中)
textarea放在fixed的view中,使用auto-height时,其中行末的拼音输入会中断。 [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"footer"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]textarea[代码] [代码]auto-height[代码][代码]=[代码][代码]"{{true}}"[代码] [代码]maxlength[代码][代码]=[代码][代码]"{{-1}}"[代码] [代码]fixed[代码][代码]=[代码][代码]"{{true}}"[代码] [代码]class[代码][代码]=[代码][代码]"input-msg"[代码][代码]>[代码] [代码] </[代码][代码]textarea[代码][代码]>[代码] [代码]</[代码][代码]view[代码][代码]>[代码] [代码].footer{[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]fixed[代码][代码];[代码][代码] [代码][代码]bottom[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]left[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]padding-bottom[代码][代码]: [代码][代码]15[代码][代码]rpx;[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]#cccccc[代码][代码];[代码] [代码] [代码][代码].input-msg{[代码][代码] [代码][代码]border[代码][代码]: [代码][代码]1[代码][代码]rpx [代码][代码]solid[代码] [代码]black[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]66[代码][代码]rpx;[代码][代码] [代码][代码]padding[代码][代码]: [代码][代码]15[代码][代码]rpx [代码][代码]6[代码][代码]rpx;[代码][代码] [代码][代码]}[代码][代码]}[代码]效果如图: [图片] [图片] 测试机型信息: [图片]
2017-11-06 - textarea的cursor属性无效
1.为textarea设置value属性与cursor属性,通过bindinput属性动态修改value值后,光标自动跳到句子末尾,没有按预期的cursor值调整。 2.安卓支持bindinput的返回值。ios不支持 对第一个问题做一个最简单的demo,代码如下。 [代码]<!--index.wxml-->[代码][代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]"padding:50rpx 50rpx"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]textarea[代码] [代码]style[代码][代码]=[代码][代码]"border:1px solid black;"[代码] [代码]bindinput[代码][代码]=[代码][代码]"inputValue"[代码] [代码]cursor[代码][代码]=[代码][代码]"{{cursorValue}}"[代码] [代码]placeholder[代码][代码]=[代码][代码]"这是一段占位字符"[代码] [代码] value[代码][代码]=[代码][代码]"{{content}}"[代码][代码]></[代码][代码]textarea[代码][代码]>[代码] [代码] [代码][代码]<[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]已输入{{content.length}}个字符[代码][代码] [代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码]//index.js[代码][代码]//获取应用实例[代码][代码]const app = getApp()[代码] [代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]cursorValue: 2,[代码][代码] [代码][代码]content: [代码][代码]'这是一个默认内容'[代码][代码],[代码][代码] [代码][代码]},[代码][代码] [代码][代码]inputValue: [代码][代码]function[代码][代码](e) {[代码][代码] [代码][代码]console.log([代码][代码]'input value invoke'[代码][代码]);[代码][代码] [代码][代码]console.log(e);[代码][代码] [代码][代码]const data = e.detail.value;[代码] [代码] [代码][代码]// 写入值后第一次设置cursor。[代码][代码] [代码][代码]// 无效[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]cursorValue: 2,[代码][代码] [代码][代码]content: data,[代码][代码] [代码][代码]});[代码] [代码] [代码][代码]setTimeout(() => {[代码][代码] [代码][代码]// 排除是异步的原因[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]cursorValue: 2,[代码][代码] [代码][代码]});[代码][代码] [代码][代码]console.log([代码][代码]'设置了cursorValue'[代码][代码]);[代码][代码] [代码][代码]// 但是结果依然无效。[代码][代码] [代码][代码]}, 2000);[代码][代码] [代码][代码]},[代码][代码]})[代码]将cursor的值锁定在第二个位置。实际上并没有用。 测试机型: 开发工具上测试有问题。 手机机型信息如下: [图片]
2017-10-27