微信小程序开发--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	1.1.0
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 文本最多可显示两行，1.9.0及以上版本支持

四、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('调用成功')
        }
      })
  }
})