本节知识点

• action-sheet
• modal
• toast
• loading

action-sheet 底部弹出框

从屏幕底部弹出来的菜单列表

bindchange 事件名称 点击背景或者action-sheet-cancel 按钮触发change事件。不携带数据.

action-sheet-item

底部菜单表的子选项

action-sheet-cancel

底部菜单表的取消按钮，和的区别是。点击它会触发的change事件，并且外观上会痛它上面的内容间隔开来

具体见代码:

index.html

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
    <block wx:for-items="{{actionSheetItems}}">
        <action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item>
    </block>
    <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
<view>
    提示：您选择了菜单{{menu}}
</view>

index.js

Page({
  data: {
    actionSheetHidden: true,
    actionSheetItems: [
      { bindtap: 'Menu1', txt: '菜单1' },
      { bindtap: 'Menu2', txt: '菜单2' },
      { bindtap: 'Menu3', txt: '菜单3' }
    ],
    menu: ''
  },
  actionSheetTap: function () {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  actionSheetbindchange: function () {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindMenu1: function () {
    this.setData({
      menu: 1,
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindMenu2: function () {
    this.setData({
      menu: 2,
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindMenu3: function () {
    this.setData({
      menu: 3,
      actionSheetHidden: !this.data.actionSheetHidden
    })
  }
})

modal 模态弹窗

模拟弹窗

• title String 标题
• no-cancel Boolean 默认false 是否隐藏cancel按钮
• confirm-text String 确定 confirm 按钮文字
• cancel-text String 确定 取消 cancel按钮文字
• bindconfirm 事件名称 点击confirm触发的回调
• bindcancel 事件名称 点击cancel以及蒙层触发的回调

<!--模态弹窗开始-->
<view>提示：{{tip}}</view>
<button type="default" bindtap="showModal">点击我弹出modal对话框</button>
<view>
  <modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"
  bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好，我是modal对话框</modal>
</view>
<!--模态弹窗结束-->

index.js

Page({
  data:{
    tip:'',
    modalHidden:true
  },
  showModal:function(){
    this.setData({
      modalHidden:!this.data.modalHidden
    })
  },
  modalBindaconfirm:function(){
     this.setData({
      modalHidden:!this.data.modalHidden,
      tip:'您点击了【确认】按钮！'
    })
  },
  modalBindcancel:function(){
     this.setData({
      modalHidden:!this.data.modalHidden,
      tip:'您点击了【取消】按钮！'
    })
  }
})

toast消息提示框，一般用来提示用户登录，密码之类的.

使用toast 必须要绑定bindchange事件

<form bindsubmit="formBindsubmit" bindreset="formReset">
  <view style="display:flex;">
    <label>用户名：</label>
    <input name="userName" placeholder="请输入用户名！" />
  </view>
  <view style="display:flex;">
    <label>密码：</label>
    <input name="psw" placeholder="请输入密码！" password="true" />
  </view>
  <view style="display:flex;margin-top:30px;">
    <button style="width:30%;" formType="submit" >登录</button>
    <button style="width:30%" formType="reset" >重置</button>
  </view>
</form>
<view>{{userName}}</view>
<view>{{psw}}</view>
<toast duration="2000" hidden="{{toastHidden}}" bindchange="toastBindChange">用户名或密码不能为空！</toast>

index.js

Page({
  data:{
    toastHidden:true,
    userName:'',
    psw:''
  },
  formBindsubmit:function(e){
    if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){
      this.setData({
        toastHidden:!this.data.toastHidden
      })
    }else{
      this.setData({
        tip:'',
        userName:'用户名：'+e.detail.value.userName,
        psw:'密码：'+e.detail.value.psw
      })
    }
  },
  formReset:function(){
    this.setData({
      userName:'',
      psw:''
    })
  },
  toastBindChange:function(){
    this.setData({
        toastHidden:!this.data.toastHidden
    })
  }
})

loading加载动画

与toast一样，只不过他不能自己设置时间

<loading hidden="{{loadingHidden}}">
    加载中...
</loading>
<button type="default" bindtap="loadingTap">点击弹出loading</button>

index.js

Page({
    data: {
        loadingHidden: true
    },
    loadingTap: function(){
        this.setData({
          loadingHidden: false
        });
        var that = this;
        setTimeout(function(){
          that.setData({
              loadingHidden: true
          });
        }, 3000);
    }
})