微信小程序自定义底部弹框

一.新建组件popup_set

popup_set.wxml

<view class="half-screen">
  <!--屏幕背景变暗的背景  -->
  <view class="background_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
  <!--弹出框  -->
  <view animation="{{animationData}}" class="{{ isOwn?'attr_box':'attr_box2' }}" wx:if="{{showModalStatus}}">
    <view class="menu_items">
      <view class="menu_item set_top">{{fileName}}</view>
      <block>
        <view wx:for="{{groups}}" wx:item="{{item}}" wx:key="{{item.id}}">
          <view wx:if="{{item.isShow}}" catchtap="itemTap" class="menu_item {{item.id == 2? 'set_bottom' : ''}}{{item.id == 3? 'color_red' : ''}}" data-name="{{item.name}}" data-id="{{item.id}}">{{item.name}}</view>
        </view>
      </block>
    </view>
    <view class="button_item" bindtap="hideModal">
      取消
    </view>
  </view>
</view>

popup_set.js

// 获取应用实例
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    userId: {
      type: String,
      value: ''
    },
    fileName: {
      type: String,
      value: ''
    },
    fileItem: {
      type: String,
      value: ''
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    //弹窗显示控制 
    showModalStatus: false,
    groups: [{
        name: '打开文档',
        id: 1,
        isShow: true
      },
      {
        name: '删除',
        id: 2,
        isShow: true
      }
    ],
  },
  onLoad() {
    wx.setNavigationBarTitle({
      title: fileItem.fileName
    })
  },
  onShow() {

  },
  /**
   * 组件的方法列表
   */
  methods: {
    //点击显示底部弹出
    changeRange: function (e) {
      debugger
      // doc,docx,ppt,pptx,xls,xlsx
      const _k1 = `groups[1].isShow` // 拼接动态属性
      this.setData({
        [_k1]: false,
      })
      const fileExtName = this.getfileName(this.data.fileName)
      if (fileExtName == '.doc' || fileExtName == '.docx' || fileExtName == '.ppt' || fileExtName == '.pptx' || fileExtName == '.xls' || fileExtName == '.xlsx' ||
        fileExtName == '.DOC' || fileExtName == '.DOCX' || fileExtName == '.XLS' || fileExtName == '.XLSX' || fileExtName == '.PPT' || fileExtName == '.PPTX' || fileExtName == '.PDF') {
        this.setData({
          [_k1]: true,
        })
      }
      setTimeout(() => {
        this.showModal();
      }, 200)
    },
    //底部弹出框
    showModal: function () {
      // 背景遮罩层
      var animation = wx.createAnimation({
        duration: 200,
        timingFunction: "linear",
        delay: 0
      })
      animation.translateY(300).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: true
      })
      setTimeout(function () {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 200)
    },

    //点击背景面任意一处时，弹出框隐藏
    hideModal: function () {
      //弹出框消失动画
      var animation = wx.createAnimation({
        duration: 200,
        timingFunction: "linear",
        delay: 0
      })
      animation.translateY(300).step()
      this.setData({
        animationData: animation.export(),
      })
      setTimeout(function () {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: false
        })
      }.bind(this), 200)
    },
    // 弹框里面的跳转事件
    itemTap(e) {
      let that = this
      let id = e.currentTarget.dataset.id
      let item = e.currentTarget.dataset.item
      if (id == 1) {
       
      }
      if (id == 2) {
        
      }
      that.setData({
        showModalStatus: false
      })
    },
    // 截取文件后缀
    getfileName(filename) {
      // 转换为小写
      const pos = filename.toLowerCase().lastIndexOf('.')
      let suffix = ''
      if (pos !== -1) {
        suffix = filename.substring(pos)
      }
      return suffix
    },
  }
})

 popup_set.wxss

 .half-screen {
   width: 100%;
   height: 100%;
 }

 /*使屏幕变暗  */
 .background_screen {
   width: 100%;
   height: 100%;
   color: rgb(255 95 0);
   width: 100%;
   color: rgb(255 211 0);
   height: 100%;
   color: rgb(98 189 255);
   position: fixed;
   color: rgb(255 111 119);
   top: 0;
   color: rgb(73 238 255);
   left: 0;
   color: rgb(98 189 255);
   background: #000;
   color: rgb(253 97 106);
   opacity: 0.2;
   overflow: hidden;
   color: rgb(253 97 106);
   z-index: 1000;
   color: #fff;
 }

 /*对话框 */
 .attr_box {
   color: #465253;
   width: 100%;
   overflow: hidden;
   position: fixed;
   bottom: 20rpx;
   left: 0;
   z-index: 2000;
   /* height: 760rpx; */
 }

 .attr_box2 {
  color: #465253;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 20rpx;
  left: 0;
  z-index: 2000;
  /* height: 560rpx; */
}

 .set_bottom {
   border-top: 1rpx solid rgb(243, 243, 243);
   border-bottom: 1rpx solid rgb(243, 243, 243);
 }

 .set_top {
   color: #BCC0C8;
   white-space: nowrap;
   /* 不换行 */
   overflow: hidden;
   /* 超出部分隐藏 */
   text-overflow: ellipsis;
   /* 文本溢出显示省略号 */
 }

 .color_red {
   color: red
 }

 .menu_items {
   width: calc(100% - 1rem);
   background-color: #FCFCFC;
   margin-left: 0.5rem;
   border-radius: 10px;
 }

 .menu_item {
   height: 50px;
   line-height: 50px;
   text-align: center;
   font-size: 30rpx;
   padding-left: 1rem;
   padding-right: 1rem;
 }

 .button_item {
   margin-top: 10px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   font-size: 30rpx;
   width: calc(100% - 1rem);
   background-color: #FCFCFC;
   margin-left: 0.5rem;
   border-radius: 10px;
 }

 .button_item {
   color: #17908E;
   text-align: center;
   height: 50px;
   line-height: 50px;
 }

父组件wxml

<popup-set id="popupfile" fileName="{{fileName}}" fileItem="{{fileItem}}"  data-item="{{fileItem}}" data-id="{{fileItem.Id}}" >
  </popup-set>

父页面js

Page({
  data: {
    todoLoading: !1,
    windowHeight: "100%",
    isOwn: false,
    fileItem: [], //单个文件的内容
    fileName: '', //弹框 单个文件标题
  },
  onReady: function () {
    var o = this;
    wx.getSystemInfo({
      success: function (t) {
        o.setData({
          windowHeight: t.windowHeight + "px"
        })
      }
    })
  },
  onShow: function () {
   
  },
  onLoad: function (t) {},

  // 打开签收文件操作弹框
  openPopup: function (event) {
    let item = event.detail.currentTarget.dataset.item
    this.setData({
      fileItem: item ? item : '',
      fileName: item.fileName ? item.fileName : '',
    })
    let popupfile = this.selectComponent("#popupfile");
    popupfile.changeRange();
  },
  refresh: function (event) {},
})