微信小程序-modal弹出框之免责声明

先来说明一下我们需要实现的最终效果：

点击“退出”按钮，返回上一页（或跳转到指定页面）；

未勾选“我已阅读并同意”之前，“继续”按钮点击无效；

勾选“我已阅读并同意”之后可以点击“继续”按钮，点击“继续”按钮之后弹窗消失。

思路分析

首先，我们需要设置一个modal弹出框，我们先来了解一下modal弹出框的一些常用属性。

其次，我们需要实现点击选中，再次点击取消选中的效果，可以通过给radio绑定一个点击事件（bindtap）来实现这一功能。详情可以点此查看。

下面我们直接看代码：

1. WXML

<modal hidden="{{hiddenmodalput}}" title="阅读须知" cancel-text="退出" bindcancel="cancel" confirm-text="继续"  bindconfirm="{{bindconfirm}}">
  <view class='instructions'>{{instructions}}</view>
  <radio class='radioScale' checked="{{checked}}" bindtap="checked">我已阅读并同意</radio>
</modal>

2. JS

Page({
  data: {
    instructions: "阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知阅读须知",
    //可以通过hidden是否掩藏弹出框的属性
    hiddenmodalput: false,
    checked: false,
    // “继续”按钮的点击事件
    bindconfirm: "",
  },

  //点击选中事件，再次点击取消选中  事件
  checked: function(e) {
    var check = this.data.checked;
    var bindconfirm = this.data.bindconfirm;
    if (check) { // 当check=true时，即当前为选中，那么我们点击之后就是取消选中
      this.data.checked = false;
      // 取消选中之后，“继续”按钮无效
      this.data.bindconfirm = "";
      console.log("已取消选中");
    } else { // check=false时，即当前为没有选中，那么我们点击之后就是选中
      this.data.checked = true;
      // 选中之后，点击“继续”按钮执行confirm事件
      this.data.bindconfirm = "confirm";
      console.log("已选中");
    }
    this.setData({
      "checked": this.data.checked,
      "bindconfirm": this.data.bindconfirm,
    });
  },

  //取消按钮  跳转到指定页面
  cancel: function() {
    wx.switchTab({
      url: '../personal/personal',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  //确认  
  confirm: function() {
    this.setData({
      // 掩藏弹出框
      hiddenmodalput: true
    })
  },
})

3. WXSS

根据自己需求进行样式设置

/* 设置多余内容修剪隐藏 */
.instructions {
  height: 300rpx;
  font-size: 32rpx;
  color: pink;
  /* 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 */
  overflow: auto;
}

设置radio大小

/* 单选钮样式 */
.radioScale {
  transform: scale(0.7);
}