最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

[基本解决]Framework7中如何实现列表项中添加列表

Framework7 crifan 622浏览 0评论

折腾:

[已解决]Flask的SQLAlchemy中给数据库的表中添加列表类型的字段

期间,需要对于已有的列表中的某一行内,显示列表的内容

<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>

希望在里面实现人员名字的列表

framework7 列表嵌套

vue-framework7

List View (Table View) | Framework7 Documentation

目前暂时用:

<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>

从而暂时实现了:

列表内部嵌套显示列表。

虽然难看,但是先凑合吧。

转载请注明:在路上 » [基本解决]Framework7中如何实现列表项中添加列表

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
57 queries in 0.249 seconds, using 18.90MB memory