美文网首页
弹出框的实现

弹出框的实现

作者: 幽兰清风 | 来源:发表于2017-09-22 20:16 被阅读23次

    布局:

        <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>  
    

    js控制

        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  
                })  
            }  
              
        }) 
    

    相关文章

      网友评论

          本文标题:弹出框的实现

          本文链接:https://www.haomeiwen.com/subject/xstqextx.html