小程序模板网

小程序form表单的简单应用,字体变大不居中问题

2018-04-16 常山阵

一:form表单的应用

分享者:Fenchow,原文地址

 

				
  1. <form bindsubmit="formSubmit" bindreset="formReset">
  2. <view>选择类别:</view>
  3. <view class="section section_gap">
  4. <radio-group name="radio-group">
  5. <label><radio value="radio1"/>爱情</label>
  6. <label><radio value="radio2"/>事业</label>
  7. <label><radio value="radio3"/>友情</label>
  8. <label><radio value="radio4"/>责任</label>
  9. <label><radio value="radio5"/>前途</label>
  10. </radio-group>
  11. </view>
  12.  
  13. <text class="txt">我的姓名:</text>
  14. <view class="section">
  15. <input name="input" />
  16. </view>
  17.  
  18. <text>我的头衔:</text>
  19. <view class="section">
  20. <input name="input"/>
  21. </view>
  22.  
  23. <text class="txt">介绍一下我自己:</text>
  24. <view class="section1">
  25. <textarea placeholder="" focus="{{focus}}" />
  26. </view>
  27.  
  28.  
  29.  
  30. <text class="txt">需要支付:</text>
  31. <view class="section" type="number">
  32. <input name="input" placeholder="0.01" />
  33. </view>
  34.  
  35.  
  36.  
  37. <view class="btn-area">
  38. <button formType="submit" style="background:#ff9900">提交</button>
  39. </view>
  40. </form>
 

				
  1. Page({
  2. data: {
  3. height: 20,
  4. focus: false
  5. },
  6. bindButtonTap: function() {
  7. this.setData({
  8. focus: true
  9. })
  10. },
  11. bindTextAreaBlur: function(e) {
  12. console.log(e.detail.value)
  13. },
  14. bindFormSubmit: function(e) {
  15. console.log(e.detail.value.textarea)
  16. },
  17. formSubmit: function(e) {
  18. console.log('form发生了submit事件,携带数据为:', e.detail.value)
  19. },
  20. formReset: function() {
  21. console.log('form发生了reset事件')
  22. }
  23. })
 

				
  1. .section{
  2. border:1px solid #ddd;
  3. width:96%;
  4. margin:auto;
  5. height:80rpx;
  6. margin-top:20rpx;
  7. }
  8. .section1{
  9. border:1px solid #ddd;
  10. width:96%;
  11. margin:auto;
  12. margin-top:20rpx;
  13. }
 

二:字体变大不居中

分享者:zhuwansan,原文地址  场景:点击一个字母弹出一个modal,把这个字母显示在modal里。

 

				
  1. style:
  2. .modal{
  3. position: absolute;
  4. left: 0;
  5. right: 0;
  6. top: 0;
  7. bottom: 0;
  8. margin: 600rpx 300rpx 0 300rpx;
  9. height: 140rpx;
  10. border-radius: 10rpx;
  11. line-height: 160rpx;
  12. color: #fff;
  13. font-size: 40pt;
  14. box-sizing: border-box;
  15. background-color: rgba(178, 178, 178, 0.7)
  16. }

结果如下:

解析:通过对字体的放大缩小可以看出来字体小的时候居中,放大的时候是以左边线进行放大的,这与css里的机制中心点放大不一样。

解决的方式:添加padding

 

				
  1. padding-right: 23rpx;

结果如下:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23459.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询