WeChat 애플릿 형태의 구성요소 동작 소개

高洛峰
풀어 주다: 2017-03-11 14:18:27
원래의
1621명이 탐색했습니다.

이 글은 주로 WeChat 애플릿의 양식 구성 요소에 대한 자세한 설명에 대한 관련 정보를 소개합니다. 필요한 친구는

양식을 참조할 수 있습니다.

에서 사용자 입력 전환 제출

:

렌더링:

ml:


<!--头像-->
<view style="display:flex;justify-content: center;">
  <image style="width:130rpx;height:130rpx;border-radius:50%;margin-top:10%;" src="../../image/logo.jpg"> </image>
</view>
<!--
form表单组件 是提交form内的所有选中属性的值,
注意每个form表单内的组件都必须有name属性指定否则提交不上去,
button中的type两个submit,reset属性分别对应form的两个事件
-->
<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" >
  <!--用户名与密码-->
  <View class="inputView">
    <input class="input" name="username" type="number" placeholder="请输入账号" placeholder-style="color: gray"> </input>
  </View>
  <view class="inputView">
    <input class="input" name="password" password="true" placeholder="请输入密码" placeholder-style="color: gray"/>
  </view>
  <!--登录用户类型-->
  <View style="display:flex;justify-content: center;margin-top:10px;">
    <radio-group name="radio-group" bindchange="radioChange">
      <label>
        <radio value="manager" checked="true"/>管理员
      </label>
      <label>
        <radio value="tearch" checked="true"/>老师
      </label>
      <label>
      <radio value="student" checked="true"/>学生
      </label>
    </radio-group>
    <!--忘记密码-->
    <label>
      <switch name="switch" type="checkbox" checked bindchange="switch1Change" style="margin-left:20px;"/>
      <Text style="font-size: 14px;padding-left:5px;">忘记密码?</Text>
    </label>
  </View>
  <!--button formType属性两个可选值submit, reset分别会触发form的bindsubmit,bindreser事件 -->
  <button formType="submit" type="primary" style="margin-top:10px;">提交</button>
  <button formType="reset" type="warn" style="margin-top:10px;">重置</button>
</form>
로그인 후 복사

ss :


.input{
  padding-left: 10px;
  height: 44px;
}
.inputView{
  /*边界:大小1px, 为固体,为绿色*/
  border: 1px solid green;
  /*边界角的弧度*/
  border-radius: 10px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 15px;
}
로그인 후 복사

js:

코드 복사


Page({
 data:{
  // text:"这是一个页面"
 },
 //点击提交
 listenFormSubmit:function(e){
   console.log(&#39;listenFormSubmit=&#39;,e.detail.value)
 },
 //点击重置
 listenFormReser:function(e){
   console.log(&#39;listenFormReser=&#39;,e.detail.value)
 },
 //点击忘记密码
 switch1Change:function(e){
  console.log(&#39;switch1Change=&#39;,e.detail.value)
 },
  //当选中某一个的时候回调该函数。e.detail.value:获取选中某个radio的value
 radioChange: function(e) {
  console.log(&#39;radio发生change事件,携带value值为:&#39;, e.detail.value)
 }
})
로그인 후 복사

참고:

양식 구성 요소는 양식에서 선택한 모든 속성의 값을 제출하는 것입니다.

양식의 각 구성 요소에는 이름 속성이 지정되어 있으면 제출되지 않습니다.

버튼의 두 가지 제출 유형과 재설정 속성이 각각 해당됩니다. 두 가지 이벤트에

읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

위 내용은 WeChat 애플릿 형태의 구성요소 동작 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿