推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：502
小程序form表单的简单应用，字体变大不居中问题
发布时间:2020-12-01分享者：Fenchow，原文地址
<form bindsubmit="formSubmit" bindreset="formReset">
<view>选择类别:</view>
<view class="section section_gap">
<radio-group name="radio-group">
<label><radio value="radio1"/>爱情</label>
<label><radio value="radio2"/>事业</label>
<label><radio value="radio3"/>友情</label>
<label><radio value="radio4"/>责任</label>
<label><radio value="radio5"/>前途</label>
</radio-group>
</view>
<text class="txt">我的姓名：</text>
<view class="section">
<input name="input" />
</view>
<text>我的头衔：</text>
<view class="section">
<input name="input"/>
</view>
<text class="txt">介绍一下我自己：</text>
<view class="section1">
<textarea placeholder="" focus="{{focus}}" />
</view>
<text class="txt">需要支付：</text>
<view class="section" type="number">
<input name="input" placeholder="0.01" />
</view>
<view class="btn-area">
<button formType="submit" style="background:#ff9900">提交</button>
</view>
</form>
Page({
data: {
height: 20,
focus: false
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
},
bindFormSubmit: function(e) {
console.log(e.detail.value.textarea)
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function() {
console.log('form发生了reset事件')
}
})
.section{
border:1px solid #ddd;
width:96%;
margin:auto;
height:80rpx;
margin-top:20rpx;
}
.section1{
border:1px solid #ddd;
width:96%;
margin:auto;
margin-top:20rpx;
}
二：字体变大不居中
分享者：zhuwansan，原文地址 场景：点击一个字母弹出一个modal,把这个字母显示在modal里。
style:
.modal{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 600rpx 300rpx 0 300rpx;
height: 140rpx;
border-radius: 10rpx;
line-height: 160rpx;
color: #fff;
font-size: 40pt;
box-sizing: border-box;
background-color: rgba(178, 178, 178, 0.7)
}
结果如下：
解析：通过对字体的放大缩小可以看出来字体小的时候居中，放大的时候是以左边线进行放大的，这与css里的机制中心点放大不一样。
解决的方式：添加padding
padding-right: 23rpx;
结果如下：
