微信小程序开发–API界面交互

一、wx:showactionsheet（上拉菜单）

属性类型默认值必填说明itemlistarray.<string>是按钮的文字数组，数组长度最大为 6itemcolorstring#000000否按钮的文字颜色successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）tapindexnumber用户点击的按钮序号，从上到下的顺序，从0开始

二、wx:showmodal（弹窗）

属性类型默认值必填说明titlestring否提示的标题contentstring否提示的内容showcancelbooleantrue否是否显示取消按钮canceltextstring‘取消’否取消按钮的文字，最多 4 个字符cancelcolorstring#000000否取消按钮的文字颜色，必须是 16 进制格式的颜色字符串confirmtextstring‘确定’否确认按钮的文字，最多 4 个字符confirmcolorstring#576b95否确认按钮的文字颜色，必须是 16 进制格式的颜色字符串successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

三、showtoast / hidetoast（加载）

属性类型默认值必填说明最低版本titlestring是提示的内容iconstring‘success’否图标imagestring否自定义图标的本地路径，image 的优先级高于 icondurationnumber1500否提示的延迟时间maskbooleanfal否是否显示透明蒙层，防止触摸穿透successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

object object

属性类型默认值必填说明successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

object.icon 的合法值

值说明最低版本success显示成功图标，此时 title 文本最多显示 7 个汉字长度loading显示加载图标，此时 title 文本最多显示 7 个汉字长度none不显示图标，此时 title 文本最多可显示两行，及以上版本支持

四、showloading /hideloading（加载）

属性类型默认值必填说明titlestring是提示的内容maskbooleanfal否是否显示透明蒙层，防止触摸穿透successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

注意

wx.showloading和wx.showtoast同时只能显示一个wx.showloading应与wx.hideloading配对使用

<view class="container">  <button bindtap="onload">showactionsheet</button>  <button bindtap="onmodal">showmodal</button>  <button bindtap="ontoast">showtoast</button>  <button bindtap="onhidetoast">hidetoast</button>  <button bindtap="onloading">showloading</button></view>

//index.jspage({  /**   * 页面的初始数据   */  data: {  },  onload: function() {    console.log("点击了我")    //交互操作组件  必须通过api的方式使用    wx.showactionsheet({      itemlist: ['刺激战场', '王者荣耀', '炉石传说'],      //点击其中任一项回调      succ理财培训ess: function(res) {        //res.cancel是否点击了取消、        if (!res.cancel) {          //tapindex指的是点击的下标          console.log(res.tapindex)        }      }    })  },  onmodal: function() {    wx: wx.showmodal({      ti美丽邻居tle: '标题',      //提示的标题      content: '内容'2022高考全国乙卷,      //提示的内容      showcancel: true,      //是否显示取消      canceltext: 'res',      //按钮的内容，最多四个字符      cancelcolor: '#ff0',      //取消按钮的文字颜色，必须是 16 进制格式的颜色字符串      confirmtext: '确定',      //确认按钮的文字，最多 4 个字符      confirmco班主任寄语lor: '#666',      //确认按钮的文字颜色，必须是 16 进制格式的颜色字符串      success: function(res) {        console.log('调用成功')      },      //接口调用成功的回调函数      fail: function(res) {        console.log('调用失败')      },      //接口调用失败的回调函数      complete: function(res) {        console.log('e')      },      //接口调用结束的回调函数（调用成功、失败都会执行）    })  },  ontoast: function() {    wx: wx.showtoast({      title: '成功',      icon: 'success',      image: '',      duration: 2000,      mask: true,      success: function(res) {},      fail: function(res) {},      complete: function(res) {},    })  },  onloading: function() {    wx: wx.showloading({      title: '加载中',      mask: true,      success: function(res) {},      fail: function(res) {},      complete: function(res) {},    }),    ttimeout(      function() {        wx.hideloading()      }, 2000    )  },  onhidetoast: function() {    wx.hidetoast({        success: function(res) {          console.log('调用成功')        }      })  }})