Реализация пакета пользовательских модальных всплывающих окон для небольших программ

внешний интерфейс Апплет WeChat CSS

предисловие

Апплет официально предоставленwx.showModalметод, но стиль относительно фиксированный и не может удовлетворить разнообразные потребности, поэтому индивидуальная настройка обязательна ~

Старые правила первые на картинке

Нажмите кнопку, чтобы всплытьmodalBox, содержимое в нем можно настраивать, это может быть простая текстовая подсказка или сложный макет, такой как поле ввода. После операции нажмите «Отмена» или «ОК», чтобы закрытьmodal.

как пользоваться

поставить следующееmodal.wxml,modal.wxss,modal.js,modal.jsonСкопируйте четыре файла в соответствующее место.

Также очень просто вызвать после инкапсуляции, взгляните на вызывающий код

<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
   <view class='modal-content'> 
    <formrow wx:for='{{goodsList}}' wx:key='{{index}}' title="{{item.name}}" placeholder='库存{{item.store}}' mode='input' rowpadding='10rpx' currentId="{{index}}" bindinput='goodsInput'></formrow>
   </view>
</modal>

существуетmodalопределено вslot, так что любой макет, который необходимо отобразить, может быть заключен вmodalсередина.

Приведенный выше код упрощен до

<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
   <view class='modal-content'>你自己的布局</view>
</modal>

Необходимо передать четыре атрибута

show: используется для управленияmodalпоказать и скрыть.

height: ОпределениеmodalВысота , которая может быть в процентах или определенной единице, такой как600rpx.

bindcancel: Обратный вызов для нажатия кнопки отмены.

bindconfirm: Обратный вызов для нажатия кнопки OK.

использовать один для вашего собственного макетаviewзавернитеmodalв этикетке.

начать упаковку

Сначала создайте новый в папке, где вы храните свои пользовательские компоненты.modalПапка, личная привычка складывать все компоненты вcomponentsпод.

затем щелкните правой кнопкой мыши и создайте новыйcomponent, Обратите внимание, чтоcomponentнетpage, потому что он вводится на страницу как компонент.

Смотрим на макет

modal.wxml

<view class='mask' wx:if='{{show}}' bindtap='clickMask'>
  <view class='modal-content' style='height:{{height}}'>
    <scroll-view scroll-y class='main-content'>
      <slot></slot>
    </scroll-view>
    <view class='modal-btn-wrapper'>
      <view class='cancel-btn' style='color:rgba(7,17,27,0.6)' bindtap='cancel'>取消</view>
      <view class='confirm-btn' style='color:#13b5f5' bindtap='confirm'>确定</view>
    </view>
  </view>
</view>

Объяснение макета

Внешний слой полупрозрачный.maskМаска, закрывающая всю страницу. Внутри содержимое упаковкиview, область содержимого состоит из двух слоев: верхняя — это область основного содержимого, где размещается входящий макет, а нижняя — кнопки отмены и OK.

положи сюдаslotиспользоватьscroll-viewОбернут для решения проблемы высоты входящего макета, превышающей область содержимого, и прокрутки, если она превышает. Так что не беспокойтесь о входящей высоте макета, просто используйте ее смело.

Высота области содержимого передается через атрибутheightХорошо, по умолчанию 80%

modal.wxss

.mask{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.4);
  z-index: 9999;
}

.modal-content{
  display: flex;
  flex-direction: column;
  width: 90%;
  /* height: 80%; */
  background-color: #fff;
  border-radius: 10rpx;
}

.modal-btn-wrapper{
  display: flex;
  flex-direction: row;
  height: 100rpx;
  line-height: 100rpx;
  border-top: 2rpx solid rgba(7,17,27,0.1);
}

.cancel-btn, .confirm-btn{
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
}

.cancel-btn{
  border-right: 2rpx solid rgba(7,17,27,0.1);
}

.main-content{
  flex: 1;
  height: 100%;
  overflow-y: hidden; 
}

объяснение css

CSS ничего не говорит, просто скопируйте его напрямую.

Обратите внимание на несколько моментов:

будет.maskизz-indexУстановите его выше, чтобы убедиться, что он может быть поверх всех макетов.

modal.js


/**
 * 自定义modal浮层
 * 使用方法：
 * <modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
     <view>你自己需要展示的内容</view>
  </modal>

  属性说明：
  show： 控制modal显示与隐藏
  height：modal的高度
  bindcancel：点击取消按钮的回调函数
  bindconfirm：点击确定按钮的回调函数

  使用模块：
  场馆 -> 发布 -> 选择使用物品
 */

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示modal
    show: {
      type: Boolean,
      value: false
    },
    //modal的高度
    height: {
      type: String,
      value: '80%'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickMask() {
      // this.setData({show: false})
    },

    cancel() {
      this.setData({ show: false })
      this.triggerEvent('cancel')
    },

    confirm() {
      this.setData({ show: false })
      this.triggerEvent('confirm')
    }
  }
})

Код Js также очень прост, вpropertiesОпределите два свойства, которые необходимо передать вshowиheightи укажите значение по умолчанию.

существуетmethodsНапишите обратные вызовы для нажатия кнопок «Отмена» и «ОК» на китайском языке.После нажатия кнопки передайтеthis.setData({ show: false })будетmodalспрятаться и пройтиthis.triggerEvent('confirm')Передайте событие клика.

modal.json

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

json в основном декларируетmodalдля компонента

Эпилог

Вышеупомянутое простоmodalВсплывающая упаковка. Если вы не хотите, чтобы следующие две кнопки подтверждали и отменяли, все содержимое области содержимого должно быть передано извне, вы можете написать так

<view class='mask' wx:if='{{show}}' bindtap='clickMask'>
   <slot></slot>
</view>

Если несколькоslotДа, все апплеты поддерживаются.

Как это реализовать, зависит от конкретных потребностей бизнеса.Пользовательские компоненты очень гибкие и могут быть скорректированы в соответствии с потребностями бизнеса.

Категории