小程序模板网

小程序学习笔记《三》登陆页面toast做判断,单选框,this.setData 修改json里面的

发布时间:2018-04-14 15:23 所属栏目:小程序开发教程

一:登陆页面toast做判断

 

分享者:山水之间,来自原文地址 
//index.xml

 

				
  1. <form bindsubmit="formBindsubmit" bindreset="formReset">
  2. <view style="display:flex;">
  3. <label>用户名:</label>
  4. <input name="userName" placeholder="请输入用户名!" />
  5. </view>
  6. <view style="display:flex;">
  7. <label>密码:</label>
  8. <input name="psw" placeholder="请输入密码!" password="true" />
  9. </view>
  10. <view style="display:flex;margin-top:30px;">
  11. <button style="width:30%;" formType="submit" >登录</button>
  12. <button style="width:30%" formType="reset" >重置</button>
  13. </view>
  14. </form>
  15. <view>{{userName}}</view>
  16. <view>{{psw}}</view>
  17. <toast duration="2000" hidden="{{toastHidden}}" bindchange="toastBindChange">用户名或密码不能为空!</toast>

//index.js

 

				
  1. Page({
  2. data:{
  3. // text:"这是一个页面"
  4. toastHidden:true,
  5. userName:'',
  6. psw:''
  7. },
  8. formBindsubmit:function(e){
  9. if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){
  10. this.setData({
  11. toastHidden:!this.data.toastHidden
  12. })
  13. }else{
  14. this.setData({
  15. tip:'',
  16. userName:'用户名:'+e.detail.value.userName,
  17. psw:'密码:'+e.detail.value.psw
  18. })
  19. }
  20. },
  21. formReset:function(){
  22. this.setData({
  23. userName:'',
  24. psw:''
  25. })
  26. },
  27. toastBindChange:function(){
  28. this.setData({
  29. toastHidden:!this.data.toastHidden
  30. })
  31. }
  32. })
 

二:单选框

 

//index.wxml

 

				
  1. <view class="item">
  2. <p>单选</p>
  3. <block wx:for="{{box}}" wx:for-item="box" wx:for-index="index">
  4. <view wx:if="{{choose==index}}">
  5. <view bindtap="choose" data-index="{{index}}" class="box_choose box">{{box.name}}</view>
  6. </view>
  7. <view wx:else="{{choose==index}}">
  8. <view bindtap="choose" data-index="{{index}}" class="box">{{box.name}}</view>
  9. </view>
  10. </block>
  11. </view>

index.wxss



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23406.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询