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

一、wx:showactionsheet（上拉菜单）

属性	类型	默认值	必填	说明
itemlist	array.<string>		是	按钮的文字数组，数组长度最大为 6
itemcolor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

tapindex

number

用户点击的按钮序号，从上到下的顺序，从0开始

 

二、wx:showmodal（弹窗）

属性	类型	默认值	必填	说明
title	string	否	提示的标题
content	string	否	提示的内容
showcancel	boolean	true	否	是否显示取消按钮
canceltext	string	'取消'	否	取消按钮的文字，最多 4 个字符
cancelcolor	string	#000000	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmtext	string	'确定'	否	确认按钮的文字，最多 4 个字符
confirmcolor	string	#576b95	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

三、showtoast / hidetoast（加载）

属性	类型	默认值	必填	说明	最低版本
title	string	是	提示的内容
icon	string	'success'	否	图标
image	string	否	自定义图标的本地路径，image 的优先级高于 icon
duration	number	1500	否	提示的延迟时间
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

 

object object

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

 

object.icon 的合法值

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

四、showloading /hideloading（加载）

属性	类型	默认值	必填	说明
title	string	是	提示的内容
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

注意

• 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.js
page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  onload: function() {
    console.log("点击了我")
    //交互操作组件  必须通过api的方式使用
    wx.showactionsheet({
      itemlist: ['刺激战场', '王者荣耀', '炉石传说'],
      //点击其中任一项回调
      success: function(res) {
        //res.cancel是否点击了取消、
        if (!res.cancel) {
          //tapindex指的是点击的下标
          console.log(res.tapindex)
        }
      }
    })
  },
  onmodal: function() {
    wx: wx.showmodal({
      title: '标题',
      //提示的标题
      content: '内容',
      //提示的内容
      showcancel: true,
      //是否显示取消
      canceltext: 'res',
      //按钮的内容，最多四个字符
      cancelcolor: '#ff0',
      //取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
      confirmtext: '确定',
      //确认按钮的文字，最多 4 个字符
      confirmcolor: '#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) {},
    }),
    settimeout(
      function() {
        wx.hideloading()
      }, 2000
    )
  },
  onhidetoast: function() {
    wx.hidetoast({
        success: function(res) {
          console.log('调用成功')
        }
      })
  }
})