精华内容
下载资源
问答
  • 实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。 html <view class=commodity_screen bindtap=hideModal wx:if={{showModalStatus}}></view> ...
  • 主要介绍了微信小程序自定义纯净模态弹出框)的实例代码,代码简答易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • wx.showToast({ title: '成功', duration: 1000, success: function () { setTimeout(function () { wx.reLaunch({ url: '........', }) }, 1000); } })
    wx.showToast({
    	 title: '成功',
    	 duration: 1000,
    	 success: function () {
    	 setTimeout(function () {
    	 wx.reLaunch({
    	 url: '........',
     	  })
     	}, 1000);
      }
    })
    
    展开全文
  • 主要介绍了微信小程序 自定义消息提示框的相关资料,wx.showToast(OBJECT)接口调用,实现改功能,需要的朋友可以参考下
  • 点击弹窗按钮则弹出信息,点击右上角关闭按钮则关闭弹出层,弹出后遮盖层部分不可点击,无上拉下滑操作。用作于提示,展示列表,添加内容等操作。
  • 主要为大家详细介绍了微信小程序商品详情页的底部弹出框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序弹出确认

    千次阅读 2019-12-23 14:26:23
    1.wxml 2.js 3.效果

    1.wxml
    在这里插入图片描述2.js
    在这里插入图片描述3.效果
    在这里插入图片描述

    展开全文
  • 常用的微信小程序弹出框事件

    千次阅读 2019-07-06 10:36:56
    常用的小程序弹出框wx.showToast()wx.showLoading()wx.showModal() wx.showToast() 代码: wx.showToast({ title: ‘提示信息’, }) 参数: title:显示的提示信息,在没有图标的情况下,文本内容可显示两行 icon: ...

    wx.showToast()

    代码:
    wx.showToast({
    title: ‘提示信息’,
    })
    在这里插入图片描述
    参数:
    title:显示的提示信息,在没有图标的情况下,文本内容可显示两行
    icon: 显示的图标
    success:成功图标
    loading:加载图标
    none:没有图标
    image:自定义显示的图标,优先级高于icon
    duration:延迟的时间,弹出框弹出后的显示时间
    mask:true/false是否显示遮罩层
    success:接口调用成功的回调函数
    fail:接口调用失败的回调函数
    complete:不管成功还是失败都会执行的函数

    wx.showLoading()

    代码:
    wx.showLoading({
    title: ‘玩命加载中。。。’,
    })
    在这里插入图片描述
    参数:
    title:加载的提示信息eg:玩命加载中…
    mask:是否现思遮罩层
    success:接口调用成功的回调函数
    fail:接口调用失败的回调函数
    complete:无论成功还是失败都会执行的函数

    wx.showModal()

    代码:
    wx.showModal({
    title: ‘提示’,
    content: ‘这是一个模态弹窗’,
    success: function(res){
    if (res.confirm) {
    console.log(‘用户点击确定’)
    } else if (res.cancel) {
    console.log(‘用户点击取消’)
    }
    }
    })
    在这里插入图片描述
    参数:
    title:提示信息的标题
    content:提示信息的内容
    showCancel:true/false是否显示取消按钮
    cancelText:取消按钮的文本内容,不得超过四个字符
    cancelColor:取消按钮的文本颜色,默认#000000
    confirmText:确认按钮的文本内容,不得超过四个字符
    confirmColor:却惹按钮的文本颜色,默认#000000
    success:接口成功的回调
    fail:接口失败的回调
    complete:无论成功或失败都会调用

    wx.showActionSheet(Object object)

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

    在这里插入图片描述

    参数:
    itemList:按钮的文字数组,数组长度最大为 6
    itemColor:按钮的文字颜色
    success:接口调用成功的回调函数
    fail:接口调用失败的回调函数
    complete:接口调用结束的回调函数(调用成功、失败都会执行)

    展开全文
  • 微信小程序授权登录弹框
  • 微信小程序弹出框详解

    万次阅读 多人点赞 2017-09-29 16:59:37
    消息提示框 button >     < button   type ="primary" bindtap ="modalcnt" > 模态弹窗 button >     < button   type ="primary" bindtap ="actioncnt" > 操作菜单 button >   view > span > ...


    [html]  view plain  copy
    1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container" class="zn-uploadimg">  
    2.     <button type="primary"bindtap="showok">消息提示框</button>   
    3.     <button type="primary"bindtap="modalcnt">模态弹窗</button>   
    4.     <button type="primary"bindtap="actioncnt">操作菜单</button>   
    5. </view></span>  

    1.消息提示——wx.showToast(OBJECT)


    [html]  view plain  copy
    1. <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;">//show.js  
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     showok:function() {  
    6.         wx.showToast({  
    7.             title: '成功',  
    8.             icon: 'success',  
    9.             duration: 2000  
    10.         })  
    11.     }  
    12. })  
    13. </span>  

    2.模态弹窗——wx.showModal(OBJECT)



    [html]  view plain  copy
    1. //show.js  
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     modalcnt:function(){  
    6.         wx.showModal({  
    7.             title: '提示',  
    8.             content: '这是一个模态弹窗',  
    9.             success: function(res) {  
    10.                 if (res.confirm) {  
    11.                 console.log('用户点击确定')  
    12.                 } else if (res.cancel) {  
    13.                 console.log('用户点击取消')  
    14.                 }  
    15.             }  
    16.         })  
    17.     }  
    18. })  




    3.操作菜单——wx.showActionSheet(OBJECT)


    [html]  view plain  copy
    1. //show.js  
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     actioncnt:function(){  
    6.         wx.showActionSheet({  
    7.             itemList: ['A', 'B', 'C'],  
    8.             success: function(res) {  
    9.                 console.log(res.tapIndex)  
    10.             },  
    11.             fail: function(res) {  
    12.                 console.log(res.errMsg)  
    13.             }  
    14.         })  
    15.     }  
    16. })  




    4.指定modal弹出

       指定哪个modal,可以通过hidden属性来进行选择。

    [html]  view plain  copy
    1. <!--show.wxml-->  
    2. <view class="container" class="zn-uploadimg">  
    3.     <button type="primary"bindtap="modalinput">modal有输入框</button>   
    4. </view>  
    5. <modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  
    6.     <input type='text'placeholder="请输入内容" auto-focus/>  
    7. </modal>  


    [html]  view plain  copy
    1. //show.js   
    2. //获取应用实例    
    3. var app = getApp()    
    4. Page({  
    5.     data:{  
    6.         hiddenmodalput:true,  
    7.         //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框  
    8.     },  
    9.     //点击按钮痰喘指定的hiddenmodalput弹出框  
    10.     modalinput:function(){  
    11.         this.setData({  
    12.            hiddenmodalput: !this.data.hiddenmodalput  
    13.         })  
    14.     },  
    15.     //取消按钮  
    16.     cancel: function(){  
    17.         this.setData({  
    18.             hiddenmodalput: true  
    19.         });  
    20.     },  
    21.     //确认  
    22.     confirm: function(){  
    23.         this.setData({  
    24.             hiddenmodalput: true  
    25.         })  
    26.     }  
    27.       
    28. })  


    原文地址http://blog.csdn.net/gao_xu_520/article/details/71084162?locationNum=1&fps=1
    展开全文
  • 小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等 如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI ...
  • 微信小程序弹出对话框

    万次阅读 2017-07-18 16:38:52
    在很多应用中,对话框是不可避免的,那么如何在微信小程序里面弹出一个对话框呢,请看下文: 1.在wxml文件中编写布局: 点击弹出对话框 对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text=...
  • 最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西…… 场面一度十分尴尬 可是得做啊,要不然产品大姐又要暴走了…… 好吧,来研究一下模态对话框的性质...
  • 微信小程序自定义弹出提示框

    千次阅读 2019-03-08 11:46:55
    wxml &lt;view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"&gt;&lt;/view&gt; &lt;view class="...image sr
  • 点击出发时间 弹出时间选择器: 选择时间后,返回时间: 代码部分:三个页面(index.wxml 、index.wxss 、index.js)关键代码部分 1.index.wxml <view class="iconfloat"> <van-icon class=...
  • 主要介绍了微信小程序常用的3种提示弹窗实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序开发—(五)弹出框

    万次阅读 多人点赞 2017-05-02 17:31:33
    消息提示框 模态弹窗 操作菜单 1.消息提示——wx.showToast(OBJECT) //show.js //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: '成功', icon: '...
  • 主要为大家详细介绍了微信小程序表单验证form提交错误提示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1.wx.showToast 消息提示框 //icon:success 成功图标,loading 加载图标 (7个汉字长度),none不显示(两行文字) //image:设置自定义图标,优先级高于icon //mask:显示蒙层 wx.showToast({ title: '成功', ...
  • 微信小程序点击事件之后实现从底部弹出一个新的页面 bindtap实现传递参数,循环展示弹出框的主要信息
  • github地址:https://github.com/sajiang/popup-for-weixin 可以查看完整的组件代码和使用方法。 效果: ...来控制popUp的弹出和关闭 3.bind:closepopup="modalClosed"方法 modalClo...
  • 微信小程序-顶部提示框弹出动画

    千次阅读 2018-09-10 10:57:54
    点击弹出提示 wxss: .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; }...
  • 效果 思路 用css的animation属性做动画 代码 wxml: (show == 2?... 点击弹出提示 wxss:   .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-
  • 微信小程序动画之消息框弹出

    万次阅读 2019-05-30 13:17:13
    微信小程序动画之消息框弹出 上图 js: Page({ data: { showModalStatus: false }, powerDrawer: function(e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: ...
  • 作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢?...vant-weapp中弹主要分为**两大类:弹出层Popup
  • 微信小程序弹出框

    2020-02-12 15:13:29
    1.微信小程序开发——弹出框 1).消息提示——wx.showToast(OBJECT) //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: ‘成功’, icon: ‘success’, duration: 2000 }) } }) 2...
  • 本文首发自个人自有博客:【FaxMiao个人...微信小程序则提供了几个弹出框api,使用起来更简单、方便;每个api都有不同的使用方式、场景,今天我们就来说说小程序的几种弹出框。 目录 wx.showToast() wx.showModa...
  • 微信小程序弹出框样式

    千次阅读 2019-09-18 18:39:00
    -- 弹出购买详情 --> <view bindtap='showModal'> click me </view> <code class="language-html"><!--屏幕背景变暗的背景 --> <view class="commodity_screen" bindtap="hideModal...
  • 微信小程序表单验证,点击确认发布不能为空错误提示,具体内容如下 以下是效果图: 代码如下: WXML: <view class=ad_popError wx:if={{popErrorMsg}}>{{popErrorMsg}} <form bindsubmit=goDetail > &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,930
精华内容 3,572
关键字:

微信小程序弹出提示框

微信小程序 订阅