#笔记#微信小程序底部弹出框

点击事件之后，从底部弹出一个新的框显示详细信息，大致效果如下：

当点击某个测试块时，要实现从底部弹出一个新的页面显示该测试的具体信息

页面主要代码部分

<view class="commodity_screen" bindtap="hideModal" wx:if="{
      {showModalStatus}}">view>

<scroll-view scroll-y="true" style="height:100vh;"
     wx:for="{
      {data}}" wx:key="index">
      
    block>
    <view animation="{
      {animationData}}" class="commodity_attr_box" wx:if="{
      {showModalStatus}}">
      
    view>
  view>
scroll-view>

css样式部分

/* 弹出框的样式 */
/*使屏幕变暗  */
.commodity_screen {
     
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*弹出框 */
.commodity_attr_box {
     
  height: 700rpx;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

clickme: function () {
     
    this.showModal()
  },
  // 显示对话框
  showModal: function () {
     
    // 显示遮罩层
    var animation = wx.createAnimation({
     
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    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
    })
    this.animation = animation
    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)
  },

1、遇到的问题：
在做这个功能的时候有遇到一个问题就是，一开始是把弹出框的代码部分放在block循环内，这样导致了一个问题就是，不管我点击哪一个测试块，弹出框显示的主要信息都是最后一个测试块的信息，这就出现了问题，但是如果把代码部分放在block之外的话一开始并不知道如何实现通过点击不同的测试块而实现显示不同的信息。
2、解决方案：
增设一个数据列表，当点击不同的测试块时实现将该测试块的所有信息绑定到新的数据列表中，通过bindtap实现传递参数（如何通过bindtap实现传递参数），在获取数据之后，再通过{ {}}将数据展示出来即可。

开发中遇到的一个小坑，记录一下