1.做小程序表單的時(shí)候上下要對(duì)齊一個(gè)文本域和input輸入框，沒想到小程序的textarea在android和ios上差距這么明顯，如下圖，本來之前遇到這個(gè)問題的時(shí)候，設(shè)置了margin和padding之后就解決了，但是在小程序上發(fā)現(xiàn)設(shè)置padding和margin設(shè)置為0也沒用，還是去不掉android和ios表現(xiàn)不一的問題，于是研究了一番還是給收拾好了，下面先上問題圖：
從上面兩圖可以看出來這個(gè)文本域差別也太大了，這效果要是說一樣的話也太牽強(qiáng)了，于是調(diào)整了下margin、padding的，發(fā)現(xiàn)并沒有什么用，而且這個(gè)textarea的間距在ios上大的有點(diǎn)離譜了，即使android和ios不要求一樣，但是單一個(gè)ios上面的間距也是明顯的大，難看，好，下面寫下自己的解決辦法，先上兩張效果圖：
下面寫實(shí)現(xiàn)過程：
js文件:
Page({
??data: {
? ? detail:false,
? },
? onLoad: function (options) {
? ? var phone = wx.getSystemInfoSync();? //調(diào)用方法獲取機(jī)型
? ? 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>行動(dòng)名稱</view><input placeholder='請(qǐng)輸入' /></view>
<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行動(dòng)介紹</view><view class="{{detail ? 'iostextarea' ?: 'androidtextarea'}}"><textarea placeholder='請(qǐng)輸入' /></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;
}
至此，實(shí)現(xiàn)想要的效果。
