微信小程序开发(七)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/leprechaun_/article/details/80879315

自定义弹窗的实现

一般情况下我们使用wx.showModal显示弹窗,并能够实现确认/取消的简单操作。但是有些情况下我们希望能够实现弹窗获取input值,这时候就需要用到微信小程序的modal组件

如在点餐系统中,提交订单时我们需要顾客输入其餐台号。

wxml

<view class="submit-btn activity-color-bg" bindtap='showModal'>
  <view class="submit-btn-label color-white">提交订单</view>
</view>
<modal hidden="{{hiddenModal}}" title="餐台号" confirm-text="提交" cancel-text="取消" bindconfirm = 'modelConfirm' bindcancel='modelCancel'>
   <input placeholder='请输入您的餐台号' bindinput='input'/>
</modal>

JS函数

input: function (e) {
    this.setData({ tableid: e.detail.value })
  },

input函数用于获取弹窗中输入的值


  showModal: function (e) {
    this.setData({ hiddenModal: false })
  },

showModal函数绑定在按钮上,点击按钮则设置hiddenModal为false,即显示弹窗。

  modelConfirm: function (e) {
    this.setData({ hiddenModal: true })
    let that = this;
    if (this.data.tableid <= getApp().globalData.tableNum && this.data.tableid>0) {

      wx.showToast({
        title: '当前餐台号为' + this.data.tableid,
        icon: 'none'
      })
    } else if (this.data.tableid > getApp().globalData.tableNum || this.data.tableid <=0) {
      wx.showToast({
        title: '请输入正确的餐台号!',
        icon: 'none'
      })
    } else {
      wx.showToast({
        title: '您尚未输入餐台号!',
        icon: 'none'
      })
    }
  },

  modelCancel: function (e) {
    this.setData({ hiddenModal: true })
    wx.showToast({
      title: '您尚未输入餐台号!',
      icon: 'none'
    })
  },

modelConfirmmodelCancel函数绑定在modal组件的bindconfirmbindcancel上,分别对应点击确定/取消对应的操作。

展开阅读全文

没有更多推荐了,返回首页