微信小程序---365笔记第43天---模块选择、获取模块数据、显示模块数据

需求：
1.选择模块相应的模块，单击选择相应的模块，两次点击相同的模块，模块选中状态取消；
2.获取选中模块的数据，并将模块的数据通过弹窗显示出来；

wxml:

    <!-- 选择不同的模块 -->
      <view class="module">
        <block wx:for="{{modlue}}" wx:key="module">
          <view class="module-circle {{item.selected==true ?'active':'normal'}}" data-index="{{index}}" bindtap='SelectModule'>{{item.name}}</view>
        </block>
      </view>
    <!-- 选择不同的模块 -->

    <view class="changeBtn">
      <view class="con4_bot" bindtap='showMyOption'>我选择的</view>
    </view>

    <!-- 测试弹窗-->
    <view class='shade' hidden='{{popup}}' bindtap='hidePopup'></view>
    <view class='shade_box popup' hidden='{{popup}}'>
      <view class='title'>
        <text>我选的模块为</text>
      </view>
      <view class='content'>{{result}}、</view>
      <view class='msg' bindtap='hidePopup'>点击遮罩层关闭弹窗</view>
    </view>

wxss:

    /* pages/module/module.wxss */

    page {
      height: 100%;
    }

    .module-tips {
      padding: 30rpx 30rpx 10rpx 30rpx;
      font-size: 30rpx;
      color: #999;
    }

    .module {
      display: inline-block;
      padding-left: 13rpx;
      padding-right: 13rpx;
      padding-bottom: 20rpx;
    }

    .active {
      background-color: #ffdf3f;
    }

    .normal {
      background-color: #f4f4f4;
    }

    .module-circle {
      height: 110rpx;
      width: 120rpx;
      border-radius: 50%;
      line-height: 110rpx;
      text-align: center;
      font-size: 30rpx;
      margin: 10rpx;
      float: left;
      overflow: hidden;
      padding: 2rpx;
    }

    .con4_bot {
      height: 82rpx;
      line-height: 82rpx;
      background: #ffdf3f;
      border-radius: 41rpx;
      font-size: 32rpx;
      color: #000;
      text-align: center;
      margin-bottom: 50rpx;
      padding-left: 140rpx;
      padding-right: 140rpx;
      margin: 10rpx auto;
    }

    .changeBtn {
      display: flex;
      align-items: center;
      padding: 10rpx 30rpx 60rpx 30rpx;
    }

    /* 弹窗样式,上线去掉 */

    /* 遮罩 */

    .shade {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.75);
      z-index: 10;
    }

    .shade_box {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      z-index: 11;
      min-width: 200rpx;
      min-height: 200rpx;
      font-size: 28rpx;
      box-sizing: border-box;
      color: #333;
      font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
      letter-spacing: 0;
      word-wrap: break-word;
      animation-name: popup;
      animation-duration: 0.2s;
      animation-timing-function: linear;
      animation-delay: 0;
      animation-iteration-count: 1;
      animation-direction: normal;
    }

    @keyframes popup {
      from {
        opacity: 0;
        transform: scale(0.3, 0.3);
      }

      to {
        opacity: 1;
        transform: scale(1, 1);
      }
    }
    /* 当前弹窗样式 */

    .popup {
      width: 600rpx;
      height: 600rpx;
      background-color: #fff;
    }

    .popup .title {
      padding: 0 20rpx;
      border-bottom: #e5e5e5 solid 1px;
      height: 70rpx;
      line-height: 70rpx;
      font-size: 32rpx;
      background-color: #f6f6f6;
    }

    .popup .content {
      margin: 100rpx;
      font-size: 40rpx;
      text-align: center;
      color: #09f;
    }

    .popup .copy {
      color: #999;
      text-align: center;
    }

    .popup .msg {
      color: #f00;
      text-align: center;
      margin-top: 30rpx;
    }

js:

    Page({
      data: {
        popup: true, //弹窗
        module: ['公共安全',
          '历史与考古',
          '汉语言文学',
          '医学',
          '心理学',
          '物理',
          '法律与政治',
          '艺术',
          '教育与培训',
          '地理与环境',
          '生物',
          '数学',
          '哲学与宗教',
          '外国语言文学',
          '治疗与咨询',
          '社会学与人类学',
          '化学',
          '交通',
          '传播与媒体',
          '建筑与施工',
          '计算机与电子',
          '人力资源管理',
          '经济与会计',
          '通讯与电信',
          '设计',
          '生物资源与食品',
          '客户与人群服务',
          '文书',
          '机械',
          '工程与打',
          '生产与加工',
          '销售与营销',
          '行政与管理',
        ],//存储模块数据
      },
      onLoad: function (options) {
        var moduleArr = this.data.module;
        var modlue = [];
        for (var i = 0; i < moduleArr.length; i++) {
          modlue.push({
            'index': i,
            'name': moduleArr[i],
            'selected': false
          });
        }
        this.setData({
          modlue: modlue
        })
      },
      SelectModule: function (e) {
        var slet = this;
        console.log(e)
        let index = e.currentTarget.dataset.index;
        var indx = slet.data.modlue[index].index;
        if (indx == index) {
          slet.data.modlue[index].selected = !slet.data.modlue[index].selected;
          console.log(slet.data.modlue[index].selected)
          var act = slet.data.modlue[index].selected;
          this.setData({
            indx: indx,
            modlue: slet.data.modlue
          })
        }
        var MySelectArr = [];
        for (var i = 0; i < slet.data.modlue.length; i++) {
          var mySelect = slet.data.modlue[i];
          if (mySelect.selected == true) {
            MySelectArr.push(mySelect);
          }
          this.setData({
            MySelectArr: MySelectArr
          })
        }
        console.log(this.data.MySelectArr)
      },
      showMyOption(){
        this.showPopup();
        var result=[];
        var resul = this.data.MySelectArr;
        for (var i = 0; i < resul.length;i++){
          result.push(resul[i].name);
        }
        this.setData({
          result: result
        })
        console.log(this.data.result)
      },
      //弹窗
      /* 隐藏弹窗 */
      hidePopup(flag = true) {
        this.setData({
          "popup": flag
        });
      },
      /* 显示弹窗 */
      showPopup() {
        this.hidePopup(false);
      }
    })

热爱前端，热爱编程，热爱分享，欢迎一起聊各种技术问题，一起进步，一起成长！微信：zhan_1337608148