day02 微信小程序

界面常用的相关API

界面加载时常用的

• index.wxml

代码如下（示例）：

<!--pages/cards/index.wxml-->
<view>
界面常用的相关API
</view>
<button bindtap="showLoading">显示加载框</button>
<button bindtap="hideLoading">隐藏加载框</button>
<button bindtap="showModal">确认框</button>
<button bindtap="showToast">提示框</button>
<button bindtap="showActionSheet">选择框</button>
<button bindtap="setBarTitle">设置页面的标题</button>
<button bindtap="setBarLoading">设置bar加载效果</button>
<button bindtap="cancelBarLoading">取消bar加载效果</button>
<button bindtap="hideTabbar">隐藏 tabbar</button>
<button bindtap="showTabbar">显示 tabbar</button>

• index.js

代码如下（示例）：

Page({
  showLoading: function () {
    wx.showLoading({
      // mask:true,
      title: '加载中',
    });
  },
  hideLoading: function () {
    wx.hideLoading();
  },
  showModal: function () {
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定');
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      },
    });
  },
  showToast: function () {
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000,
    });
  },
  showActionSheet: function () {
    wx.showActionSheet({
      itemList: ['苹果', '香蕉', '栗子'],
      success(res) {
        console.log(res.tapIndex);
      },
      fail(res) {
        console.log(res.errMsg);
      },
    });
  },
  setBarTitle: function () {
    wx.setNavigationBarTitle({
      title: '设置标题',
    });
  },
  setBarLoading: function () {
    wx.showNavigationBarLoading();
  },
  cancelBarLoading: function () {
    wx.hideNavigationBarLoading();
  },
  hideTabbar: function () {
    wx.hideTabBar({
      animation: true,
    });
  },
  showTabbar: function () {
    wx.showTabBar({
      animation: true,
    });
  },
});