微信小程序-自定义弹框-版本2

上一章自定义弹框-版本1我们已经学会了比较简单的弹框了，今天我们继续优化一下，主要是优化底部按钮

4328664A-2975-4E1C-AA7E-E1CD95500657.png

第一步，我们对popView.wxml布局进行略微的修改，采取通过btnsfor循环进行创建底部按钮

<view wx:if="{{canShow}}" class= 'popV' catchtouchmove="move">
  <view class='popV-mask' bindtap="selectMask"></view> 
  <view class='popV-content'> 
    <slot></slot>
    <view class='popV-content-btm'>
      <view wx:for="{{btns}}" 
            wx:key="{{index}}" 
            data-index="{{index}}" 
            class='popV-item {{index==btns.length-1?"popV-item-highlighted":""}}' 
            hover-class='popV-hover'
            bindtap='selectBtn'>{{item}}</view>
    </view>
  </view>
</view>

第二步，我们对popView.wxss进行优化

/* 底部 */
.popV-content-btm {
  height: 100rpx;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;

  border-top-width: 1rpx;
  border-top-style: solid;
  border-top-color: #E1E1E1;
}
.popV-item {
  flex: 1;
  font-size: 36rpx;
  color: #888888;
  text-align: center;
  line-height: 100rpx;
  font-family: PingFang-SC-Medium;

  border-right-width: 1rpx;
  border-right-style: solid;
  border-right-color: #E1E1E1;
}
.popV-item-highlighted {
  color: blue;
  border-right-width: 0rpx;
}
.popV-hover {
  background: #DDD;
}

第三步，我们对popView.js进行优化

Component({
  options: {
    // multipleSlots: true // 开启多slot支持
  },
  // 属性
  properties: {
    canShow: {
      type: Boolean,
      value: false, // 默认值
    },
    btns: {
      type: Array,
      value: ['取消','确定'] // 默认值
    }
  },
  // 初始化数据
  data: {
    
  }, 
  methods: {
    selectMask: function (e) {
      this.setData({
        canShow: !this.data.canShow
      });
    },
    // 选中底部的按钮
    selectBtn: function (e) {
      console.log(e)
      let index = e.currentTarget.dataset.index;
      this.triggerEvent('didClickBtn', index); // 外面通过e.detail获取index的值
    },
    move: function () {
      return;
    }
  }
})

第四步，如何使用，在index.wxml进行代码优化

<view class="container">
  <view class="userinfo" bindtap="didClick">
      <text>点我</text>
  </view>

  <view class="tempCnt1">我是来占位置的1</view>
  <view class="tempCnt2">我是来占位置的2</view>
  <view class="tempCnt3">我是来占位置的3</view>
  <view class="tempCnt4">我是来占位置的4</view>
  <view class="tempCnt5">我是来占位置的5</view>
</view>

<!-- 自定义弹框 -->
<popView canShow="{{isShowPopView}}" btns="{{['按钮1','按钮2','按钮2']}}" binddidClickBtn="didClickBtn">
    <view class="popV-cntV">
      <text class="popV-cntV-title">我是标题</text>
      <text class="popV-cntV-desc">我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,</text>
    </view>
</popView>

• 1、btns="{{['按钮1','按钮2','按钮2']}}"这里就可以直接传按钮数组文案了
• 2、 binddidClickBtn="didClickBtn"这里我们就改为绑定一个方法，不用像版本1那样子左边按钮一个事件，右边按钮一个事件

第五步，在index.js也优化一下

Page({
  data: {
    isShowPopView: false // 是否显示弹框
  },
  //事件处理函数
  didClick: function() {
    this.setData({
      isShowPopView:true
    })
    console.log('点我吧' + this.data.isShowPopView)
  },

  /**
   * 弹框事件
   * */
  didClickBtn: function (e) {
    let index = e.detail; // 拿到子组件传递过来的下标
    if(index == 0) {
      console.log('点击按钮1')
    } else if (index == 1) {
      console.log('点击按钮2')
    } else {
      console.log('点击按钮3')
    }
    this.setData({
      isShowPopView: !this.data.isShowPopView
    });
  }
})

最后总结一下，代码精简了许多，也对微信小程序更加理解了许多