上次小程序（5）

本次主要内容是常见的表单组件

WXML:

<!--pages/form/form.wxml-->

<view class="allTextView">
<icon type="info" size = "100"></icon>
<view>提交成功，感谢配合</view>
</view>
<!-- icon(success warn info...) 微信独特的图形工具 -->


<button class="btn1" type="primary" plain="true" >KDA-ONE</button>
<navigator url="/pages/swiper/swiper"><button type="primary">KDA-TWO</button></navigator>
<!-- 要使用链接时候，需要把btn放在navi里面才能实现，而非navi在btn里 -->
<button class="btn2" type="warn" plain="true" disabled>KDA-THREE</button>
<button class="btn2" type="primary" loading="true">KDA加载中</button>
<button class="btn2" type="primary" open-type="contact">KDA客服</button>
<!-- disabled 禁用模块 -->
<!-- type 颜色模块（绿、红、原始） -->
<!-- plain 镂空模块 -->
<!-- open-type 微信开放功能（more） -->
<!-- loading btn前面出现load图标 -->
<form bindsubmit="onSubmit">
    <input class="ipt" placeholder="请输入用户名" placeholder-style="color:pink" focus="true" type="text"></input>
    <button form-type="submit" type="warn">submit</button>
<!-- placeholder 框内提示 --> 
<!-- focus 帮助拉起键盘 -->
<!-- type 拉起键盘的类型 -->
    <switch class="btn2" checked="true">human</switch>
    <!-- Switch 选择项 checked 默认打开-->
</form>
<view style = "padding:50rpx;" percent = "60">
    <progress percent="79" 
    show-info 
    font-size="15"
    border-radius="10"
    activeColor="blue"
    backgroundColor="red"
    active
    >
<!-- progress 进度条功能 -->
<!-- show-info 显示进度条文字  -->
<!-- font-size 文字大小 -->
<!-- border-radius 进度条显示圆角 -->
<!-- activeColor 进度条颜色 -->
<!-- backgroundColor 进度条背景颜色 -->
<!-- active 进度条自动增长 -->
    </progress>
</view>

WXSS:

/* pages/form/form.wxss */
.btn1{margin: 20rpx 0;}
.btn2{margin: 20rpx 0;}
.ipt{border: 2px solid #ddd ; height: 50rpx;
    font-size: 30rpx;
    font-weight: bolder;
    padding: 0 10rpx;box-sizing: border-box;
    margin: 30rpx;
}

效果：

点击KDA-TWO后跳转页面

 

 

进度：