［基本解决］Framework7中如何实现列表项中添加列表

<div class="pages">

  <!– Page, data-page contains page name–>

  <div data-page="showEvent" class="page">

   

    <!– Scrollable page content–>

    <div class="page-content">

      <div class="list-block">

       <ul>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">标题</div>

                <div class="item-text">{{ curEvent.title }}</div>

              </div>

            </div>

          </li>

   

        <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">发起人</div>

                <div class="item-text">{{ curEvent.user.nickname }}</div>

              </div>

            </div>

          </li>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">起始时间</div>

                <div class="item-text">{{ curEvent.start_date | datetime_format }}</div>

              </div>

            </div>

          </li>

         

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">截止时间</div>

                <div class="item-text">{{ curEvent.end_date | datetime_format }}</div>

              </div>

            </div>

          </li>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">地点</div>

                <div class="item-text">{{ curEvent.location }}</div>

              </div>

            </div>

          </li>

         

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">人数上限</div>

                <div class="item-text">{{ curEvent.max_user_num }}人</div>

              </div>

            </div>

          </li>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">是否公开</div>

                <div class="item-text">

                    {% if curEvent.is_public %}

                        公开

                    {% else %}

                        不公开

                    {% endif %}

                </div>

            </div>

          </li>

          <li class="align-top">

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">描述</div>

                <div class="item-text">{{ curEvent.description }}

                  <!–<textarea readonly>一起头脑风暴参与讨论出日历的功能，基本的用途</textarea>–>

                </div>

              </div>

            </div>

          </li>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">提醒时间</div>

                <div class="item-text">5分钟前</div>

              </div>

            </div>

          </li>

        </ul>

      </div>

      <div class="content-block">

        <div class="row">

          <div class="col-50">

            <input type="submit" value="分享链接" class="button button-big button-fill color-cyan"/>

          </div>

          <div class="col-50">

              <form action="{{ url_for("create_event_qrcode", eventId=curEvent.id, curUserOpenid=curEvent.user.openid) }}" method="POST">

                <input type="submit" value="生成邀请码" class="button button-big button-fill color-blue"/>

              </form>

          </div>

        </div>

      </div>

     

    </div>

  </div>

</div>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">已报名人员</div>

                <div class="item-text">添加人员列表</div>

              </div>

            </div>

          </li>

<li>

  <div class="item-content">

    <div class="item-inner">

      <div class="item-title label">已报名人员</div>

      <div class="list-block inset">

        <ul>

          {% for eachJoiner in curEvent.joiners %}

            <li>

              <div class="item-content">

                <div class="item-media">

                  <img class="initiator-avatar" src="{{ url_for(‘images’, width=24, height=24, quality=95, filename = eachJoiner.avatar_static_path ) }}">

                </div>

                <div class="item-inner">

                  <div class="item-title">{{ eachJoiner.nickname }}</div>

                </div>

              </div>

            </li>

          {% endfor %}

        </ul>

      </div>

    </div>

  </div>

</li>

<!– We don’t need full layout here, because this page will be parsed with Ajax–>

<!– Top Navbar–>

<div class="navbar">

  <div class="navbar-inner">

    <div class="left"><a href="#" class="back link"> <i class="icon icon-back"></i><span>返回</span></a></div>

    <div class="center sliding">详情活动</div>

  </div>

</div>

<div class="pages">

  <!– Page, data-page contains page name–>

  <div data-page="showEvent" class="page">

   

    <!– Scrollable page content–>

    <div class="page-content">

      <div class="list-block">

       <ul>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">标题</div>

                <div class="item-text">{{ curEvent.title }}</div>

              </div>

            </div>

          </li>

   

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">提醒时间</div>

                <div class="item-text">5分钟前</div>

              </div>

            </div>

          </li>

          <li>

            <div class="item-content">

              <div class="item-inner">

                <div class="item-title label">已报名人员</div>

                <div class="list-block inset">

                  <ul>

                    {% for eachJoiner in curEvent.joiners %}

                      <li>

                        <div class="item-content">

                          <div class="item-media">

                            <img class="initiator-avatar" src="{{ url_for(‘images’, width=24, height=24, quality=95, filename = eachJoiner.avatar_static_path ) }}">

                          </div>

                          <div class="item-inner">

                            <div class="item-title">{{ eachJoiner.nickname }}</div>

                          </div>

                        </div>

                      </li>

                    {% endfor %}

                  </ul>

                </div>

              </div>

            </div>

          </li>

        </ul>

      </div>

     

    </div>

  </div>

</div>