微信开发小程序弹出框_微信小程序开发—弹出框 - CSDN
  • 消息提示 模态弹窗 操作菜单 1.消息提示——wx.showToast(OBJECT) //show.js //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: '成功', icon: '...


    <view class="container" class="zn-uploadimg">
    	<button type="primary"bindtap="showok">消息提示框</button> 
    	<button type="primary"bindtap="modalcnt">模态弹窗</button> 
    	<button type="primary"bindtap="actioncnt">操作菜单</button> 
    </view>

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


    //show.js
    //获取应用实例  
    var app = getApp()  
    Page({
    	showok:function() {
    		wx.showToast({
    		  	title: '成功',
    		  	icon: 'success',
    		  	duration: 2000
    		})
    	}
    })
    

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



    //show.js
    //获取应用实例  
    var app = getApp()  
    Page({
    	modalcnt:function(){
    		wx.showModal({
    			title: '提示',
    			content: '这是一个模态弹窗',
    			success: function(res) {
    				if (res.confirm) {
    				console.log('用户点击确定')
    				} else if (res.cancel) {
    				console.log('用户点击取消')
    				}
    			}
    		})
    	}
    })
    




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


    //show.js
    //获取应用实例  
    var app = getApp()  
    Page({
    	actioncnt:function(){
    		wx.showActionSheet({
    			itemList: ['A', 'B', 'C'],
    			success: function(res) {
    				console.log(res.tapIndex)
    			},
    			fail: function(res) {
    				console.log(res.errMsg)
    			}
    		})
    	}
    })
    




    4.指定modal弹出

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

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


    //show.js 
    //获取应用实例  
    var app = getApp()  
    Page({
    	data:{
            hiddenmodalput:true,
            //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
        },
    	//点击按钮痰喘指定的hiddenmodalput弹出框
    	modalinput:function(){
    		this.setData({
    		   hiddenmodalput: !this.data.hiddenmodalput
    		})
    	},
    	//取消按钮
    	cancel: function(){
            this.setData({
                hiddenmodalput: true
            });
        },
        //确认
        confirm: function(){
            this.setData({
    	        hiddenmodalput: true
    	    })
        }
        
    })
    











    展开全文
  • 微信小程序开发遮罩层弹出框的实现,简单实现,点击弹出遮罩,类似弹出框
  • 最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中的点击弹出模态输入框的功能不好实现,于是找了许多文章,最终是实现了这个little bin,话不多说,骡子牵出来: ...

    微信小程序点击弹出输入框

    第一次写博客,我决定不要太old school。
    let’s get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中的点击弹出模态输入框的功能不好实现,于是找了许多文章,最终是实现了这个little bin,话不多说,骡子牵出来:


    需求很简单:点击编辑按钮可以编辑商家编号,上代码:
    wxml:

    <button class="delete">
     <text>删除</text>
       </button>
       <button class="edit" bindtap="modalinput">
         <text>编辑</text>
       </button>
       <modal hidden="{{hiddenmodalput}}" title="请输入商家编号" 
       			confirm-text="提交" cancel-text="取消" bindcancel="modalinput" 
       			bindconfirm="confirm">
         <!-- 这里可以自由选择你的输入框类型<input type='text' placeholder="请输入内容" auto-focus/> -->
         <textarea placeholder="请输入内容"></textarea>
       </modal>
    

    接下来再给edit按钮指定一下modalinput点击事件就行了,而且这里取消也是绑定的modalinput事件额

    js:

    Page({
      data: {
      //初始化隐藏模态输入框
      hiddenmodalput: true,
      },
      modalinput: function () {
      this.setData({
      	//注意到模态框的取消按钮也是绑定的这个函数,
      	//所以这里直接取反hiddenmodalput,也是没有毛病
        hiddenmodalput: !this.data.hiddenmodalput
      })
    }
    })
    

    看看效果:
    在这里插入图片描述
    嗯,还不错,至于后面的提交事件就是js写请求了,没有毛病

    更多详情请点击这里:
    https://www.jb51.net/article/149121.htm

    展开全文
  • 微信小程序弹出框

    2020-02-12 18:23:27
    1.微信小程序开发——弹出框 1).消息提示——wx.showToast(OBJECT) //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: ‘成功’, icon: ‘success’, duration: 2000 }) } }) 2...
    	

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

    在这里插入图片描述

    //show.js
    //获取应用实例
    var app = getApp()
    Page({
    showok:function() {
    wx.showToast({
    title: ‘成功’,
    icon: ‘success’,
    duration: 2000
    })
    }
    })

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

    在这里插入图片描述

    //show.js
    //获取应用实例
    var app = getApp()
    Page({
    modalcnt:function(){
    wx.showModal({
    title: ‘提示’,
    content: ‘这是一个模态弹窗’,
    success: function(res) {
    if (res.confirm) {
    console.log(‘用户点击确定’)
    } else if (res.cancel) {
    console.log(‘用户点击取消’)
    }
    }
    })
    }
    })

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

    在这里插入图片描述
    //show.js
    //获取应用实例
    var app = getApp()
    Page({
    actioncnt:function(){
    wx.showActionSheet({
    itemList: [‘A’, ‘B’, ‘C’],
    success: function(res) {
    console.log(res.tapIndex)
    },
    fail: function(res) {
    console.log(res.errMsg)
    }
    })
    }
    })

    展开全文
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图: 代码 wxml <view wx:if='{{showModal}}'> <view class='mask_layer' bindtap='modal_click_Hidden' /> <...

    微信小程序开发交流qq群   173683895

       承接微信小程序开发。扫码加微信。

    效果图:

    代码

    wxml

    <view wx:if='{{showModal}}'>
      <view class='mask_layer' bindtap='modal_click_Hidden' />
      <view class='modal_box'>
        <view class="title">取消订单</view>
        <view class='content'>
          <text class='modalMsg'></text>
          <textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea>
        </view>
        <view class='btn1'>
          <view bindtap='modal_click_Hidden' class='cancel'>取消</view>
          <view bindtap='Sure' class='Sure'>确定</view>
        </view>
      </view>
    </view>

    css

    .mask_layer {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 999;
    left:0;top:0;
      background: #000;
      opacity: 0.5;
      overflow: hidden;
    }
    .modal_box {
      width: 76%;
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 1001;
      background: #fafafa;
      margin: -150px 12% 0 12%;
      border-radius: 3px;
    }
     
    .title {
      padding: 15px;
      text-align: center;
      background-color: gazure;
    }
     
    .content {
      overflow-y: scroll; /*超出父盒子高度可滚动*/
    }
     
     .input_show1{
       margin: 0 auto;
       width: 80%;
       margin-left: 10%;
       font-size: 32rpx;
       text-align: center;
     }
    .btn1 {
      width: 100%;
      margin-top: 65rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: white;
    }
     
    .cancel {
      width: 100%;
      padding: 10px;
      text-align: center;
      color: black;
    }
     
    .Sure {
      width: 100%;
      padding: 10px;
      color: #44b549;
      background-color: white;
      border-left: 1px solid #d0d0d0;
      text-align: center;
    }
     
    .modalMsg {
      text-align: center;
      margin-top: 45rpx;
      display: block;
    }

    js

    
      showCancelOrder: function() {
        this.setData({
          showModal:true
        })
      },
      modal_click_Hidden: function () {
        this.setData({
          showModal: false,
        })
      },
      // 确定
      Sure: function () {
        console.log(this.data.text)
        if (this.data.cancelReason==''){
          wx.showToast({
            title: '请填写订单取消原因',
            icon:'none'
          })
          return
        }else{
          // 提交到后端
          this.cancelOrder();
        }
      },
      changeCancelReason: function(e) {
        this.setData({
          cancelReason: e.detail.value
        })
      },
      cancelOrder: function() {
        var token = wx.getStorageSync('token');
        var that = this;
        util.POST({
          params: {
            'token': token,
            'id': this.data.order.id,
            'cancel_reason': this.data.cancelReason
          },
          API_URL: 'Doctor/cancelOrder',
          success: (res) => {
            res = res.data;
            if (res.code == 200) {
              wx.showToast({
                title: res.msg,
                icon: 'success',
                duration: 2000
              })
              setTimeout(function() {
                that.getOrderDetails();
              }, 2000)
            } else {
              wx.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000
              })
            }
            that.setData({
              showModal: false
            })
          },
          fail: function() {
    
          }
        })
      },

     

    展开全文
  • 承接小程序开发,web开发 wxml: <view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"></view> <...
  • 消息提示 模态弹窗 操作菜单 1.消息提示——wx.showToast(OBJECT) //show.js //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: '成功', ...
  • 微信小程序开发popup
  • 微信小程序开发—-一打开小程序出现选择弹出框
  • 微信小程序开发中toast也是重要的消息提示方式. 提示: wx.showToast(OBJECT) 显示消息提示 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }...
  • 对话框是微信小程序的,界面交互的一种方式,其他的还有toast等。 wx.showModal(Object object) 显示模态对话框 参数 Object object object.success 回调函数 参数 Object res 示例代码 wx....
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 弹出框和模态框的简介和使用方法如下: &lt;view class="container" class="zn-uploadimg"&gt; &lt;button type="primary"bindtap="showok"&gt;消息...
  • github地址:https://github.com/sajiang/popup-for-weixin 可以查看完整的组件代码和使用方法。 效果: ...来控制popUp的弹出和关闭 3.bind:closepopup="modalClosed"方法 modalClo...
  • wx.showToast({ title: '成功', duration: 1000, success: function () { setTimeout(function () { wx.reLaunch({ url: '........', }) }, 1000); } })
  • 微信小程序开发中toast也是重要的消息提示方式. 提示: wx.showToast(OBJECT) 显示消息提示 OBJECT参数说明: 示例代码: ? 1 2 3 4 5 wx.showToast({  title:'成功...
  • 微信小程序软键盘弹出的问题 这里记录一个微信开发的一个小问题, 1.当我开发这个页面功能的时候 在缩小的状态正常情况聚焦时在手机上会有一个软键盘弹出来完全遮住了我textarea输入框 2.遮住状态 这个时候我们...
  • 之前在开发小程序的时候遇到的问题,微信已经取消了自动弹框,所以需要开发者自己模拟弹框在用户点开小程序的时候提示授权,之前在网上搜了好多篇,有的能实现获取用户信息却不能让弹框及时弹出,因此学习总结了前人...
  • 周五.玩具一枚.  gif:  代码:  1.index.js //index.js //获取应用实例 ... isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 ani
  • 效果图 wxml &lt;button class="show-btn" bindtap="changeYL"&gt;预览&lt;/button&gt; &lt;view class="modal-mask" bindtap="...
1 2 3 4 5 ... 20
收藏数 10,885
精华内容 4,354
关键字:

微信开发小程序弹出框