Mini programa de WeChat action-Introducción detallada del menú inferior de hoja

Mini programa de WeChat action-sheet

action-sheet es un menú de selección emergente desde la parte inferior, los submenús se acceden a través de action-sheet-item y action-sheet-cancelar, action-sheet-item es el elemento del menú, action-sheet-cancelar, que significa cancelar la ocultación del menú, podemos especificar action-sheet-agregar bindtap para desencadenar la acción correspondiente al hacer clic, al hacer clic en action-sheet-al cancelar se desencadenará action-el evento bindchange del sheet. Puede controlar la visualización del menú en la función vinculada a bindchange. Además, al hacer clic en el espacio en blanco, el menú también se ocultará.

documentación oficial

　.wxml

<botón tipo="default" bindtap="actionSheetTap">action sheet emergente</botón>
<action-hoja oculta="{{actionSheetHidden}}" bindchange="actionSheetChange">
  <block wx:for-items="{{actionSheetItems}}">
    <action-sheet-item bindtap="bind{{item}}">{{item}}</action-sheet-item>
  </block>
  <action-sheet-cancel >Cancelar</action-sheet-cancel>
</action-sheet>

.js

var items = ['item1', 'item2', 'item3', 'item4}
var pageObject = {
 data: {
  actionSheetHidden: true,
  actionSheetItems: items
 ,
 actionSheetTap: function(e) {
  console.log(this);
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  }
 ,
 actionSheetChange: function(e) {
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  });
  console.log("点击ation-sheet-cancel，会触发action-sheet绑定的事件。在这里可以通过改变hidden控制菜单的隐藏");
 }
}
for (var i = 0; i < items.length; ++i) {
 (function(itemName) {
  pageObject['bind' + itemName] = function(e) {
   console.log('click' + itemName, e)
  }
 })(items[i])
}
Page(pageObject)

Efecto de ejecución

¿Cómo hacer que las imágenes no se oculten al hacer clic en un espacio en blanco? Además, ¿no es suficiente que al hacer clic en 'Cancelar' se oculte automáticamente el menú, sino que es necesario escribir una frase para que se oculte, ¿no es muy molesto?

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a este sitio!