zoukankan      html  css  js  c++  java
  • 微信小程序弹窗 Mr

    wxml

    <view class="content">
        <button bindtap="popSuccessTest">成功提示弹窗</button>
        <button bindtap="popMaskTest">带透明蒙层的弹窗</button>
        <button bindtap="popTest">纯文字弹窗</button>
        <button bindtap="popCustomIcon">自定义图标</button>
        <button bindtap="popConfirm">confirm的弹窗</button>
        <button bindtap="popLoading">加载弹窗</button>
        <button bindtap="popSelect">选择框弹窗</button>
    </view>
    

    js

    Page({
      popSuccessTest: function () {
        wx.showToast({
          title: '成功提示弹窗',
          icon: '',     //默认值是success,就算没有icon这个值,就算有其他值最终也显示success
          duration: 2000,      //停留时间
        })
      },
      popMaskTest: function () {
        wx.showToast({
          title: '带蒙层的弹窗',     
          duration: 2000,    
          mask:true    //是否有透明蒙层,默认为false 
                       //如果有透明蒙层,弹窗的期间不能点击文档内容 
        })
      },
      popTest: function(){
        wx.showToast({
          title: '纯文字弹窗',
          icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
          duration: 2000     
        })  
      },
      popCustomIcon: function () {
        wx.showToast({
          title: '自定义图标弹窗',
          image: '../image/11.jpg',  //image的优先级会高于icon
          duration: 2000     
        })
      },
      popConfirm: function(){
        wx.showModal({
          title: 'confirm的弹窗',
          content: '确认要删除该项吗?',
          success: function (res) {
            if (res.confirm) {  
              console.log('点击确认回调')
            } else {   
              console.log('点击取消回调')
            }
          }
        })
      },
      popLoading: function(){
        wx.showLoading({
          title:'加载中...'
        });
      },
      popSelect: function(){
        wx.showActionSheet({
          itemList: ['1', '2', '3'],
          success: function (res) {
            console.log(res);
          }
        })
      }
    });
    

    注意

    wx.showToast中比较重要的属性
    
    title: '弹窗文字内容',
    
    icon: 弹窗图标默认值是success,当没有这个属性时,或者当值为'',或者为其他值时(设置了error,warning都无效)都最终为success。如果要纯文本,不要icon,将值设为'none'
    
    image: 自定义图标,image的优先级会高于icon
    
    duration: 弹窗停留时间,
    
    mask: 是否有透明蒙层,默认为false ,如果有透明蒙层,弹窗的期间不能点击弹窗后面的文档内容
    
    wx.showLoading注意点
    
    使用wx.showLoading触发的弹窗,需要用wx.hideLoading()来关闭.
    
  • 相关阅读:
    会话状态服务器解决方法
    让笔记本在插上外置鼠标时触摸板自动关闭
    “检测到有潜在危险的 Request.Form(QueryString) 值”的解决方法
    SQL Server2008不能登录解决方法
    SqlHelper
    修改IE查看源代码编辑器
    由于启动用户实例的进程时出错,导致无法生成 SQL Server 的用户实例解决办法
    性能测试用户模型(二):用户模型图
    索引帖:性能测试新手误区系列
    性能测试用户模型(三):基础数据分析、场景数据
  • 原文地址:https://www.cnblogs.com/xinzaiyuan/p/12049586.html
Copyright © 2011-2022 走看看