04 小程序 showActionSheet showLoading showtoast showModal

wx.showActionSheet（显示操作菜单）

 

js

Page({
  feed:function(){
    wx.showActionSheet({
      itemList: ['分享到QQ', '分享到微信', '返回'],
      success (res) {
        console.log("成功")
      },
      fail (res) {
        console.log("失败")
      }
    })
  },

 

wxml

<view class="feedback" catchtap="feed">
<text>显示操作菜单</text>
</view>

 

wxss

.feedback{
  margin-top: 50rpx;
  padding: 10rpx 5rpx;
  background-color: yellowgreen;
}

• wx.showActionSheet 写成 wx：showActionSheet 错了很久

• feed:function() 与 catchtap="feed"对应

 

wx.showLoading(显示加载框)

 
 

js

Page({
    showloading:function(){
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
  },

 

wxml

<view class="loading" catchtap="showloading">
<text>显示加载框</text>
</view>
&nbsp;

<font color=LightBLue >wxss</font>

.loading{
margin-top: 50rpx;
padding: 10rpx 5rpx;
background-color: yellowgreen;
}

* catchtap="showloading"与showloading:function()对应

![](https://img2020.cnblogs.com/blog/1952644/202004/1952644-20200423170019705-521940714.png)
 

###wx.showtoast(显示提示框)
 
 

<font color=LightBLue >js</font>

Page({
showtoast:function(){

  wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
  })

},

 

<font color=LightBLue >wxml</font>

加载框 ```  

wxss

.toast{
  margin-top: 50rpx;
  padding: 10rpx 5rpx;
  background-color: yellowgreen;
}

• catchtap="toast"与 showtoast:function() 对应

 

wx.showModal(显示模态对话框)

 
 

js

Page({
  showModal:function(){
      
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

 

wxml

<view class="Modal" catchtap="showModal">
<text>加载框</text>
</view>

 

wxss

.Modal{
  margin-top: 50rpx;
  padding: 10rpx 5rpx;
  background-color: yellowgreen;
}

• 控制台可输出 console.log 的内容

 
 

总结：

• 都有 点击名:function()
• wx.事件
• 在 pag 内。
• 可以 success (res) ， fail (res) ；也可以success (res) {
  if (res.confirm) {
  console.log('用户点击确定')
  } else if (res.cancel) {
  console.log('用户点击取消')
  }