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

qqq.gif

还是老样子，废话不多说，直接上代码

862BAB5D-B974-4884-93C0-5EB1E45BFA84.png

在popView.json声明自定义组件，"component": true

{
  "component": true, 
  "usingComponents": {}
}

在popView.wxml进行基本布局

• 1、wx:if="{{canShow}}"是否显示popView
• 2、catchtouchmove="move"禁止底部视图滚动
• 3、<slot></slot>这个就是占个坑，具体布局就让外面的人喜欢怎么弄就怎么弄了

<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 class='popV-content-btm-left' hover-class='popV-hover' catchtap='selectLeft'>{{leftText}}</view>
      <view class='popV-content-btm-colLine'></view>
      <view class='popV-content-btm-right' hover-class='popV-hover' catchtap="selectRight">{{rightText}}</view>
    </view>
  </view>
</view>

.popV {
  display: flex;
  justify-content: center;
}
.popV-mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: block;
  position: fixed;
  z-index: 1000;
}
.popV-content{
  top: 268rpx;
  width: 560rpx;
  background: white;
  border-radius: 10rpx;
  display: flex;
  position: fixed;
  z-index: 1001;
  flex-direction: column;
  overflow: hidden;
}
/* 底部 */
.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-content-btm-left {
  flex: 1;
  font-size: 36rpx;
  color: #888888;
  text-align: center;
  line-height: 100rpx;
  font-family: PingFang-SC-Medium;
}
.popV-hover {
  background: #DDD;
}
.popV-content-btm-right {
  flex: 1;
  font-size: 36rpx;
  color: #0087FF;
  text-align: center;
  line-height: 100rpx;
  font-family: PingFang-SC-Medium;
}
.popV-content-btm-colLine {
  height: 100rpx;
  width: 1px;
  background-color: #E1E1E1;
}

在popView.js进行数据方法处理

• 1、multipleSlots: true这个是开启多slot支持，我们现在没用到先注释掉也可以
• 2、properties属性配置，想要配置什么就配置什么，这里我就只做了3个属性配置，分别是canShow：是否显示popView。leftText：左边按钮文案。rightText：右边按钮文案
• 3、triggerEvent这个用来给父组件传递信息的，具体解释下面代码有说明

Component({
  options: {
    multipleSlots: true // 开启多slot支持
  },

  behaviors: [],
  // 属性
  properties: {
    canShow: {
      type: Boolean,
      value: false,
    },
    leftText: {
      type: String,
      value: "左边"
    },
    rightText: {
      type: String,
      value: "右边"
    }
  },
  // 初始化数据
  data: {
    // showCoupon: true
  }, // 私有数据，可用于模版渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function () { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
  },

  methods: {
    // 需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将想要的属性拿到，第三个参数文档中有介绍
    selectMask: function (e) {
      this.setData({
        canShow: !this.data.canShow
      });
      // let yesOrNo = this.data.canShow;
      // this.triggerEvent('mask', {
      //   behavior: yesOrNo
      // }, {})
    },
    selectLeft: function () {
      this.triggerEvent('left', this.data.canShow);
    },
    selectRight: function () {
      this.triggerEvent('right', this.data.canShow);
    },
    move: function () {
      return;
    }
  }

})

如何使用

在index.json导入我们的组件

{
  "usingComponents": {
    "popView": "/components/popView/popView"
  }
}

在index.wxml布局我们的组件其他内容

• 1、这里<popView canShow="{{isShowPopView}}" leftText="取消" rightText="确定" bindleft="selectLeft" bindright="selectRight">的canShow、leftText、rightText就是我们在组件定义的属性，bindleft、bindright这个两个就是我们在组件通过triggerEvent给现在的父组件传递的事件名

<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}}" leftText="取消" rightText="确定" bindleft="selectLeft" bindright="selectRight">
    <view class="popV-cntV">
      <text class="popV-cntV-title">我是标题</text>
      <text class="popV-cntV-desc">我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,我是详情说明,</text>
    </view>
</popView>

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 200rpx;
  height: 200rpx;
  background-color: red;
}
.tempCnt1 {
  background-color: yellow;
  display: flex;
  height: 300rpx;
  width: 100%;
}
.tempCnt2 {
  background-color: rebeccapurple;
  display: flex;
  height: 300rpx;
  width: 100%;
}
.tempCnt3 {
  background-color: gray;
  display: flex;
  height: 300rpx;
  width: 100%;
}
.tempCnt4 {
  background-color: green;
  display: flex;
  height: 300rpx;
  width: 100%;
}
.tempCnt5 {
  background-color: blue;
  display: flex;
  height: 300rpx;
  width: 100%;
}
/* 弹框内容布局 */
.popV-cntV {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popV-cntV-title {
  font-size: 34rpx;
  color: #000000;
  font-family: PingFangSC-Regular;

  margin-top: 20rpx;
}
.popV-cntV-desc {
  font-size: 28rpx;
  color: #000000;
  font-family: PingFang-SC-Medium;

  margin: 20rpx;
}

在index.js进行组件的显示隐藏等操作

//获取应用实例
const app = getApp()

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

    console.log('点我吧' + this.data.isShowPopView)

  },

  /**
   * 弹框事件
   * */
  selectLeft: function () {
    console.log('点击左边')
    this.setData({
      isShowPopView: !this.data.isShowPopView
    });
  },
  selectRight: function () {
    console.log('点击右边')
    this.setData({
      isShowPopView: !this.data.isShowPopView
    });
  },
})

自定义弹框版本1就算完成了，是不是很简单