1.垂直居中的坑
wxml:
<g-form-item disabled='{{disabled}}'>
<view class='number-container'>
<view class='number-container__lable inline-sytle'>{{lable}}</view>
<view class='number-container__numb-box inline-sytle'>
<view class="sign-sytle inline-sytle {{。。?'':'exrange-sytle'}}" bindtap='。。'>
-
</view>
<view class='count-sytleinline-sytle'>{{count}}</view>
<view class="sign-sytle inline-sytle {{。。'exrange-sytle':''}}" bindtap='。。'>
+
</view>
</view>
</view>
<view wx:if='{{describe.length>0}}' class='number-descBox'>{{describe}}</view>
</g-form-item>
关键在b框,怎么上下对齐。如果把count-sytle 设为overflow:hidden,它就不跟旁边两个水平,这时候处理方式:sign-sytle集体overflow,同时要记得消除inline-block之间的缝隙。即:把number-container__numb-box:font-size:0,子元素都要设置font-size,这时候number-container__numb-box是由子元素们撑高的。但是这个会受position的影响,如果父级position:relative,这时候不用设置font-size:0,count-sytle和sign-sytle都设置vertical-align: top即可。