• 小程序弹出框详解


    标题图

    小程序弹出框详解

    qjlx: function() {
        var itemList = ['病假', '事假'];
        wx.showActionSheet({
          itemList: itemList,
          success: function(res) {
            console.log(res);
            console.log(itemList[res.tapIndex]);
          },
          fail: function(res) {
            console.log(res.errMsg);
          }
        })
      },
    

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

    效果

    效果

    //获取应用实例    
    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)  
                }  
            })  
        }  
    })  
    

    弹出框

    弹出框

    <view class='item'>
        登录密码
        <view class='bk'>
          <input class="textarea" placeholder="{{password}}" value='{{password}}' bindinput="password" maxlength='100' auto-height disabled/>
        </view>
    
        <button class='btn' bindtap='dlmm'>修改</button>
        <modal hidden="{{hiddenmodalput}}" title="修改密码" confirm-text="提交" cancel-text="取消" bindcancel="cancelM" bindconfirm="confirmM">
          <input bindinput='ipsd' type='text' placeholder="请输入原密码..." auto-focus/>
          <input bindinput='newipsd' type='password' placeholder="请输入新密码..." />
        </modal>
    
      </view>
    
    // js
    // 获取登录密码:
      password: function(e) {
        this.setData({
          password: e.detail.value,
        })
        console.log("获取登录密码:" + this.data.password);
      },
    // 修改登录密码
      dlmm: function(e) {
        this.setData({
          hiddenmodalput: !this.data.hiddenmodalput
        })
      },
      cancelM: function(e) {
        this.setData({
          hiddenmodalput: true,
        })
      },
    
      confirmM: function(e) {
        var that = this;
        console.log("原密码" + that.data.psd + "新密码" + that.data.newpsd);
        that.setData({
          hiddenmodalput: true,
        })
        wx.request({
          url: '',
          method: 'POST',
          header: {
            'Authorization': 'Bearer' + wx.getStorageSync('token'),
          },
          success(res) {
            if (res.data.code == 0) {
              wx.showToast({
                title: '保存失败',
                icon: 'success',
                duration: 500
              })
            } else {
              that.getShowToast();
            }
          }
        })
      },
    
      ipsd: function(e) {
        this.setData({
          psd: e.detail.value
        })
      },
      newipsd: function(e) {
        this.setData({
          newpsd: e.detail.value
        })
      },
    

    指定modal弹出

    效果

    <!--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> 
    
    //获取应用实例    
    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  
            })  
        }  
          
    })  
    

    效果

    //获取应用实例  
    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)
    			}
    		})
    	}
    })
    
    <!--.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>
    
    //.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
            })
        }
    })
    

    达叔小生:往后余生,唯独有你
    You and me, we are family !
    90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
    简书博客: 达叔小生
    https://www.jianshu.com/u/c785ece603d1

    结语

    • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
    • 小礼物走一走 or 点赞
  • 相关阅读:
    分部视图
    linq的几个方法
    如何让服务器支持mp4文件下载和sqlserver将表生成为sql语句方法
    在asp.net mvc中导出Excel文件
    Linq2EF操作中的两个小问题
    JSON到底是什么?
    连接跟踪(conntrack):原理、应用及 Linux 内核实现 转载
    没有安全,没有隐私
    互联网发展到今天,我们要做的,是用机器解决人类解决不了的问题。在这个意义上,比起人工智能,机器智能这个词更加准确。
    今天,世界各国城市的可持续发展面临很大挑战,这些挑战也带来了一个难得的机遇,就是利用机器智能解决城市发展过程中许多重要的问题,如交通治理。同时这也是像机器智能这样的新一代技术快速发展的机遇,这正是我全身心推动城市大脑的原因
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140391.html
Copyright © 2020-2023  润新知