Componente pop-up e caixa de slot na parte inferior do miniaplicativo

Em programas pequenos, você costuma encontrar uma caixa que aparece na parte inferior clicando em, e a caixa está na parte inferior. Supondo que várias páginas precisem usar esse efeito especial, é recomendável escrever um componente personalizado. (Sugestão pessoal !!!) . Observe diretamente o efeito do design:

semelhante ao efeito desta situação: clique no botão para abrir uma caixa para exibir as informações correspondentes. Existem muitos tipos de informação na caixa, então criei um slot aqui, e o uso é semelhante ao de vue slot.

bottomDialog.js

Component({
    
    
  /**
   * 组件的属性列表
   */
   /**
   *注：这里需要启用插槽
   */
  options: {
    
    
    multipleSlots: true
  },
  /**
   * 组件的初始数据
   */
  data: {
    
    
  },
  /**
   * 组件的方法列表
   */
  methods: {
    
    
    showModal() {
    
    
      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(()=>{
    
    
        animation.translateY(0).step()
        this.setData({
    
    
          animationData: animation.export()
        })
      }, 200)
    },
    //隐藏对话框
    hideModal() {
    
    
      var animation = wx.createAnimation({
    
    
        duration: 200,
        timingFunction: "linear",
        delay: 0
      })
      this.animation = animation
      animation.translateY(300).step()
      this.setData({
    
    
        animationData: animation.export(),
      })
      setTimeout(()=> {
    
    
        animation.translateY(0).step()
        this.setData({
    
    
          animationData: animation.export(),
          showModalStatus: false
        })
      }, 200)
    }
  }
})

bottomDialog.json

{
    
    
  "components": true
}

bottomDialog.wxml

<view class="commodity_screen" bindtap="hideModal" wx:if="{
    
    {showModalStatus}}"></view>
<view animation="{
    
    {animationData}}" class="commodity_attr_box" wx:if="{
    
    {showModalStatus}}">
  <slot name="content"></slot>
</view>

bottomDialog.wxss

.commodity_screen {
    
    
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.6;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
    
    
  height:auto;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}

Isso completa o componente do quadro de marcadores personalizado. Use componentes personalizados:

父组件中

引入自定义组件
"usingComponents": {
    
    
    "bottomDialog":"/pages/common/bottomDialog/bottomDialog"
  }

使用组件
<bottomDialog id="dialog">
  //自定义组件
  <view slot="content">
      <text class='evaluate-title'>出示以下卡片给加油员记账</text>
      <view class='evaluate-sep'></view>
      <view class="padding70 card-img-img"><image src="{
    
    {imgUrl}}"></image></view>
  </view>
</bottomDialog>

调用子组件方法=>弹起
showDialog(){
    
    
  this.selectComponent('#dialog').showModal()
}

Faça! Se você não entender, pode bater um papo comigo em particular.
Meu WeChat: huang009516