wx: wx.showModal 回调函数中调用自定义方法

一、在回调函数中调用自定义方法:

回调函数中不能直接使用this,需要在外面定义 var that = this 然后 that.自定义的方法。如下:

复制代码
  //删除
  onDelete: function (e) {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '确定要删除?',
      success: function (res) {
        if (res.confirm) {
          that.onEdit(e);
        }
      }
    })
  },
  //编辑
  onEdit: function (e) {
    console.log('编辑');
  },
复制代码

二、详解弹框wx.showToast、wx.showModal、wx.showActionSheet,modal控件解释及input输入框值的获取

(1)、wx.showToast

复制代码
  wx.showToast({
    title: '失败',//提示文字
    duration: 2000,//显示时长
    mask: true,//是否显示透明蒙层,防止触摸穿透,默认:false  
    icon: 'success', //图标,支持"success"、"loading"  
    success: function () { },//接口调用成功
    fail: function () { },  //接口调用失败的回调函数  
    complete: function () { } //接口调用结束的回调函数  
  })
复制代码

(2)、wx.showModal

复制代码
  wx.showModal({
    title: '删除图片',
    content: '确定要删除该图片?',
    showCancel: true,//是否显示取消按钮
    cancelText: "",//默认是“取消”
    cancelColor: 'skyblue',//取消文字的颜色
    confirmText: "",//默认是“确定”
    confirmColor: 'skyblue',//确定文字的颜色
    success: function (res) {
      if (res.cancel) {
        //点击取消,默认隐藏弹框
      } else {
        //点击确定
        temp.splice(index, 1),
          that.setData({
            tempFilePaths: temp,
          })
      }
    },
    fail: function (res) { },//接口调用失败的回调函数
    complete: function (res) { },//接口调用结束的回调函数(调用成功、失败都会执行)
  })
复制代码

(3)、wx.showActionSheet

  wx.showActionSheet({
    itemList: ['列1', '列2', '列3'],//显示的列表项
    success: function (res) {//res.tapIndex点击的列表项
      console.log("点击了列表项:" + that[res.tapIndex])
    },
    fail: function (res) { },
    complete: function (res) { }
  })
posted @   许宝  阅读(3965)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示