이 글은 주로 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('listenFormSubmit=',e.detail.value) }, //点击重置 listenFormReser:function(e){ console.log('listenFormReser=',e.detail.value) }, //点击忘记密码 switch1Change:function(e){ console.log('switch1Change=',e.detail.value) }, //当选中某一个的时候回调该函数。e.detail.value:获取选中某个radio的value radioChange: function(e) { console.log('radio发生change事件,携带value值为:', e.detail.value) } })
참고:
양식 구성 요소는 양식에서 선택한 모든 속성의 값을 제출하는 것입니다.
양식의 각 구성 요소에는 이름 속성이 지정되어 있으면 제출되지 않습니다.
버튼의 두 가지 제출 유형과 재설정 속성이 각각 해당됩니다. 두 가지 이벤트에
읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!
위 내용은 WeChat 애플릿 형태의 구성요소 동작 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!