• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序表单页面

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

html

<form bindsubmit="formSubmit">
    <view class="main">
        <view class="top-title">基本信息</view>
        <view class="form-content">
            <view class="form-item">
                <view class="left">成员姓名</view>
                <input class="right-input" placeholder="请输入成员真实姓名" />
            </view>
            <view class="form-item">
                <view class="left">身份证号</view>
                <input class="right-input" placeholder="请输入身份证号" />
            </view>
            <view class="form-item">
                <view class="left">生存状态</view>
                <input class="right-input" placeholder="请输入生存状态" />
            </view>
            <view class="form-item">
                <text class="left">成员性别</text>
                <view class="sex-box">
                    <radio-group name="sex" bindchange="changeSex">
                        <radio class="radio-item" value="1" checked="checked" color="#DBB975">
                            男
                        </radio>
                        <radio class="radio-item" value="2" checked="" color="#DBB975">女</radio>
                    </radio-group>
                </view>
            </view>
            <view class="form-item">
                <view class="left">与户主关系</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="请选择与户主关系" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">劳动技能</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="请选择劳动技能" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">在校生情况</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="请选择在校生情况" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">健康情况</view>
                <input class="right-input" placeholder="如健康、残疾 、长期慢性病" />
            </view>
        </view>
    </view>
    <view class="bottom">
        <button class="save-btn" form-type="submit">保存</button>
    </view>
</form>

css

page {
    background-color: #ffffff;
}

.main {
    margin-left: 30rpx; 
    margin-right: 30rpx;
    .top-title {
        margin-top: 40rpx;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    .form-item {
        height: 120rpx;
        border-bottom: 1rpx solid #e3e3e3;
        display: flex;
        align-items: center; // 垂直居中
        .left {
            width: 210rpx;
            line-height: 120rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: rgba(102, 102, 102, 1);
        }
        .right-input {
            width: 480rpx;
            font-size: 32rpx;
            line-height: 120rpx;
            font-weight: 500;
            color: rgba(170, 170, 170, 1);
            // border: 1rpx solid red;
        }

        .sex-box {
            width: 480rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            .radio-item:nth-child(2) {
                margin-left: 80rpx;
            }
        }

        .select-box {
            display: flex;
            .more {
                width: 14rpx;
                height: 26rpx;
            }
        }

        
    }

    .form-item:last-child { // 必须很纯粹,才可以
        border-bottom: 0rpx solid #e3e3e3;
    }
}
.bottom {
    background-color: #f6f6f6;
    padding-top: 70rpx;
    height: 190rpx;
    overflow-y: hidden;
    .save-btn {
        margin-right: 30rpx;
        margin-left: 30rpx;
        width: 690rpx;
        height: 102rpx;
        background: rgba(78, 135, 241, 1);
        border-radius: 6rpx;
        line-height: 102rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
    }
}

js

// pages/tmp/add_member.js
Page({
  formSubmit({ detail: { value } }) {
    console.log(\'form发生了submit事件,携带数据为:\', value);
  },
  bindPickerChange: function (e) {
    console.log(\'picker发送选择改变,携带值为\', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    array:[\'选项一\',\'选项二\',\'选项三\'],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

小程序中的select,通过picker组件来实现。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序---生成二维码工具weapp-qrcode.js的使用发布时间:2022-07-18
下一篇:
微信小程序地址下拉选择-地址名发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap