微信小程序4种弹框

1、wx.showModal 确认弹框

javascript 复制代码
 delete(){
    wx.showModal({
      title: '',
      content: '是否确认删除',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

2、wx.showToast 提示弹框

|---------|--------|
| success | 显示成功图标 |
| error | 显示失败图标 |
| loading | 显示加载图标 |
| none | 不显示图标 |

|---|---|
| | |

javascript 复制代码
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

3、wx.showLoading loading弹框

javascript 复制代码
wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

4、wx.showActionSheet 操作弹框

javascript 复制代码
wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

customer.wxml

XML 复制代码
<button class="fixed-service"  bindtap="getPhone">

  <text class="iconfont icon-kefu"></text>

  <view>客服</view>

</button>

customer.css

css 复制代码
/* 联系客服 */

.fixed-service {
  display: inline-block;
  bottom: 13%;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  font-size: 20rpx;
  padding: 10rpx;
  line-height: 1.2;
  z-index: 100;
}
.fixed-share .iconfont {
  font-size: 30rpx;
}

customer.js

javascript 复制代码
  getPhone:function (params) {
    var that=this;
    let arr=[];
		wx.request({
			url: newurl.getKfPhone,
			method: 'post',
			success (res) {
				if (res.data.status == 200) {
					console.log(res.data.data);
					that.setData({
							kfphone: res.data.data,
          });
          wx.showActionSheet({
            itemList:['拨打客服电话1','拨打客服电话2'], //文字数组
            success: (ress) => {
              switch(ress.tapIndex) {
                case 0:
                  console.log(res.data.data.kfphone1)
                  wx.makePhoneCall({
                    phoneNumber: res.data.data.kfphone1
                  });
                  break;
                case 1:
                  wx.makePhoneCall({
                    phoneNumber: res.data.data.kfphone2
                  });
                  console.log(res.data.data.kfphone2)
                  break;	
              };
            
            },
            fail (ress) {
              console.log('取消选项')
            }
          })
			} 
			}
		});
  },
相关推荐
じòぴé南冸じょうげん3 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_916013744 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918416 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张6 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩7 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程9 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
2501_915918411 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾1 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字1 天前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台