美文网首页
小程序弹框demo

小程序弹框demo

作者: 寻找大海的鱼 | 来源:发表于2019-05-20 11:35 被阅读0次

    一.index.wxml代码

    <view class="container">
      <modal hidden="{{hidden}}" title="测试弹框" cancel-text="关闭" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
        123
      </modal>
    </view>
    

    二.index.js代码

    Page({
      data: {
        hidden: false,
        nocancel: false
      },
      cancel: function () {
        this.setData({
          hidden: true
        });
      },
      confirm: function () {
        this.setData({
          nocancel: !this.data.nocancel
        });
        console.log("clicked confirm");
      }
    })
    

    三.演示结果
    1.点击关闭,弹框消失


    close.png
    closeResult.png

    2.点击确定,关闭按钮消失


    confirm.png
    confirmResult.png

    相关文章

      网友评论

          本文标题:小程序弹框demo

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