1.做小程序表单的时候上下要对齐一个文本域和input输入框,没想到小程序的textarea在android和ios上差距这么明显,如下图,本来之前遇到这个问题的时候,设置了margin和padding之后就解决了,但是在小程序上发现设置padding和margin设置为0也没用,还是去不掉android和ios表现不一的问题,于是研究了一番还是给收拾好了,下面先上问题图:
从上面两图可以看出来这个文本域差别也太大了,这效果要是说一样的话也太牵强了,于是调整了下margin、padding的,发现并没有什么用,而且这个textarea的间距在ios上大的有点离谱了,即使android和ios不要求一样,但是单一个ios上面的间距也是明显的大,难看,好,下面写下自己的解决办法,先上两张效果图:
下面写实现过程:
js文件:
Page({
data: {
detail:false,
},
onLoad: function (options) {
var phone = wx.getSystemInfoSync(); //调用方法获取机型
var that = this ;
if (phone.platform == 'ios') {
that.setData({
detail: true
});
} else if (phone.platform == 'android') {
that.setData({
detail: false
});
}
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
wxml文件:
<view class='xingdongDescript'>
<view class='xingdongNameBox'><view>行动名称</view><input placeholder='请输入' /></view>
<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行动介绍</view><view class="{{detail ? 'iostextarea' : 'androidtextarea'}}"><textarea placeholder='请输入' /></view></view></view>
wxss文件:
.xingdongDescript{
background: white;
padding: 0 0 0 30rpx;
box-sizing: border-box;
width: 100%;
height: 285rpx;
}
.xingdongNameBox{
width: 100%;
height: 88rpx;
overflow: hidden;
padding: 0 20rpx 0 0;
box-sizing: border-box;
border-bottom: 1rpx solid #E5E5E5;
}
.xingdongNameBox view{
width: 25%;
height: 88rpx;
line-height: 88rpx;
float: left;
color: #000000;
font-size: 34rpx;
}
.xingdongNameBox input{
width: 75%;
height: 88rpx;
line-height: normal;
float: left;
font-size: 34rpx;
color: #000000;
}
.xingdongjieshaoBox{
width: 100%;
height: 197rpx;
overflow: hidden;
padding: 0 20rpx 0 0;
box-sizing: border-box;
position: relative;
}
.xingdongjieshaoBox .xingdongjieshao{
width: 25%;
height: 88rpx;
line-height: 88rpx;
float: left;
color: #000000;
font-size: 34rpx;
position: absolute;
top: 0;
left: 0
}
.iostextarea{
position: absolute;
left: 24.3%;
top: 1rpx;
margin-left: -11rpx;
width: 73%;
height: 197rpx;
}
.iostextarea textarea{
position: absolute;
width: 100%;
height: 100%;
font-size: 34rpx;
}
.androidtextarea{
position: absolute;
left: 24.3%;
width: 73%;
height: 197rpx;
}
.androidtextarea textarea{
width: 100%;
height: 197rpx;
float: left;
padding: 22rpx 0 0 0;
box-sizing: border-box;
font-size: 34rpx;
}
至此,实现想要的效果。