用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:35

一:form表单的应用分享者:Fenchow,原文地址 选择类别: 爱情 事业 友情 责任 前途 我的姓名: 我的头衔: 介绍一下 ...

一:form表单的应用

分享者:Fenchow,

原文地址

  1. bindsubmit="formSubmit" bindreset="formReset">
  2. 选择类别:
  3. class="section section_gap">
  4. name="radio-group">
  5. class="txt">我的姓名:
  6. class="section">
  7. name="input" />
  8. 我的头衔:
  9. class="section">
  10. name="input"/>
  11. class="txt">介绍一下我自己:
  12. class="section1">
  13. placeholder="" focus="{{focus}}" />
  14. class="txt">需要支付:
  15. class="section" type="number">
  16. name="input" placeholder="0.01" />
  17. class="btn-area">
  18. formType="submit" style="background:#ff9900">提交
  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;

结果如下:

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏