赞助商成为赞助商

菜单列表

菜单列表是 列表视图 的一个扩展。与一般的链接列表不同，菜单列表旨在指示当前活动屏幕（或部分）的应用。可以将它想象成 Tabbar，但采用列表的形式。

我们来看一看列表视图中菜单列表的布局结构

<div class="list menu-list">
  <ul>
    <li>
      <a href="#" class="item-content item-link item-selected">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </a>
    </li>
    ...
  </ul>
</div>

地点

示例

menu-list.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Menu List</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Menu list unlike usual links list is designed to indicate currently active screen (or section) of your app.
          Think about it like a Tabbar but in a form of a list.</p>
      </div>
      <div class="list list-strong-ios list-outline-ios menu-list">
        <ul>
          <li>
            <a class="item-content item-link ${selected === 'home' ? 'item-selected' : ''}" @click=${()=>
              setItem('home')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">home</i>
                <i class="icon f7-icons if-not-md">house</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Home</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selected === 'profile' ? 'item-selected' : ''}" @click=${()=>
              setItem('profile')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">person</i>
                <i class="icon f7-icons if-not-md">person_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Profile</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selected === 'settings' ? 'item-selected' : ''}" @click=${()=>
              setItem('settings')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">settings</i>
                <i class="icon f7-icons if-not-md">gear_alt_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title">Settings</div>
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="list list-strong-ios list-outline-ios media-list menu-list">
        <ul>
          <li>
            <a class="item-content item-link ${selectedMedia === 'home' ? 'item-selected' : ''}" @click=${()=>
              setItemMedia('home')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">home</i>
                <i class="icon f7-icons if-not-md">house</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Home</div>
                </div>
                <div class="item-subtitle">Home subtitle</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selectedMedia === 'profile' ? 'item-selected' : ''}" @click=${()=>
              setItemMedia('profile')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">person</i>
                <i class="icon f7-icons if-not-md">person_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Profile</div>
                </div>
                <div class="item-subtitle">Profile subtitle</div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-content item-link ${selectedMedia === 'settings' ? 'item-selected' : ''}" @click=${()=>
              setItemMedia('settings')}
              >
              <div class="item-media">
                <i class="icon material-icons if-md">settings</i>
                <i class="icon f7-icons if-not-md">gear_alt_fill</i>
              </div>
              <div class="item-inner">
                <div class="item-title-wrap">
                  <div class="item-title">Settings</div>
                </div>
                <div class="item-subtitle">Settings subtitle</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let selected = 'home';
    let selectedMedia = 'home';

    const setItem = (newItem) => {
      selected = newItem;
      $update();
    }
    const setItemMedia = (newItem) => {
      selectedMedia = newItem;
      $update();
    }
    return $render;
  }
</script>
改进此文档
在此页面上