一：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. }

结果如下：