自定义照片浏览器 Framework7 模板

Question

我如何构建自定义 PhotoBrowser Framework7-Ver3 页面，其中包含输入文本可以接受图像索引号。

在文档中我看到了他们的选项 "renderPage"，但是当我使用它时我得到了一个 空白页面 ...我如何 运行 photoBrowser 与自定义布局或什么是 html 模板最是 "renderPage" 方法中的 return？

谢谢

Answer 1

我通过从 framwork7

中生成的 html 获取模板找到了答案

因此，我将在此处设置生成的模板，您可以删除或添加任何 custom/build 组件。

1) renderPage: function(){
            return `<div class="page photo-browser-page photo-browser-page-dark no-toolbar" data-name="photo-browser-page">
                        <div class="navbar">
                            <div class="navbar-inner sliding">
                                <div class="left">
                                    <a href="#" class="link  icon-only back">
                                        <i class="icon icon-back color-white"></i>
                                    </a>
                                </div>
                                <div class="title">
                                    <span class="photo-browser-current"></span>
                                    <span class="photo-browser-of">of</span>
                                    <span class="photo-browser-total"></span>
                                </div>
                                <div class="right"></div>
                            </div>
                        </div>
                        <div class="toolbar tabbar toolbar-bottom-md toolbar-hidden toolbar-transitioning">
                            <div class="toolbar-inner">
                                <a href="#" class="link photo-browser-prev">
                                    <i class="icon icon-back color-white"></i>
                                </a>
                                <a href="#" class="link photo-browser-next">
                                    <i class="icon icon-forward color-white"></i>
                                </a>
                            </div>
                        </div>
                        <div class="photo-browser-captions photo-browser-captions-dark">

                        </div>
                        <div class="photo-browser-swiper-container swiper-container swiper-container-virtual swiper-container-horizontal swiper-container-rtl swiper-container-android">
                            <div class="photo-browser-swiper-wrapper swiper-wrapper">
                                <div class="photo-browser-slide photo-browser-slide-lazy swiper-slide swiper-slide-prev"
                                     data-swiper-slide-index="0">
                                    <div class="preloader swiper-lazy-preloader color-white">
                                        <span class="preloader-inner">
                                          <span class="preloader-inner-gap"></span>
                                          <span class="preloader-inner-left">
                                              <span class="preloader-inner-half-circle"></span>
                                          </span>
                                          <span class="preloader-inner-right">
                                              <span class="preloader-inner-half-circle"></span>
                                          </span>
                                        </span>
                                    </div>
                                    <span class="swiper-zoom-container"></span>
                                </div>
                                <div class="photo-browser-slide swiper-slide swiper-slide-active" data-swiper-slide-index="0">
                                    <span class="swiper-zoom-container"></span>
                                </div>
                                <div class="photo-browser-slide photo-browser-slide-lazy swiper-slide swiper-slide-next"
                                     data-swiper-slide-index="1">
                                    <div class="preloader swiper-lazy-preloader color-white">
                                        <span class="preloader-inner">
                                          <span class="preloader-inner-gap"></span>
                                          <span class="preloader-inner-left">
                                              <span class="preloader-inner-half-circle"></span>
                                          </span>
                                          <span class="preloader-inner-right">
                                              <span class="preloader-inner-half-circle"></span>
                                          </span>
                                        </span>
                                    </div>
                                    <span class="swiper-zoom-container"></span>
                                </div>
                            </div>
                        </div>
                    </div>`;
        }

2) /* If you need to render template as a popup */ renderPopup: function(){
                return `<div class="popup photo-browser-popup">
                            <div class="photo-browser photo-browser-dark">
                                <div class="view">
                                    <div class="page photo-browser-page photo-browser-page-dark no-toolbar ct-popup-browser" data-name="photo-browser-page">
                                        <div id="ct-popup-browser-inner">
                                            <div class="navbar">
                                                <div class="navbar-inner sliding">
                                                    <div class="left">
                                                        <a href="#" class="link popup-close icon-only" data-popup=".photo-browser-popup">
                                                            <i class="icon icon-back color-white"></i>
                                                        </a>
                                                    </div>
                                                    <div class="title">
                                                        <span class="photo-browser-current"></span>
                                                        <span class="photo-browser-of">${getTranslationOrKey('of')}</span>
                                                        <span class="photo-browser-total"></span>
                                                    </div>
                                                    <div class="right pd-lr-16">${dim}</div>
                                                </div>
                                            </div>
                                            <div class="toolbar tabbar toolbar-bottom-md">
                                                <div class="toolbar-inner">
                                                    <a href="#" class="link photo-browser-prev swiper-button-disabled" tabindex="0"
                                                       role="button"
                                                       aria-label="Previous slide" aria-disabled="true">
                                                        <i class="icon icon-back color-white"></i>
                                                    </a>
                                                    <a href="#" class="link photo-browser-next" tabindex="0" role="button"
                                                       aria-label="Next slide"
                                                       aria-disabled="false">
                                                        <i class="icon icon-forward color-white"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="photo-browser-captions photo-browser-captions-dark"></div>
                                            <div class="photo-browser-swiper-container swiper-container swiper-container-virtual swiper-container-horizontal swiper-container-rtl swiper-container-android">
                                                <div class="photo-browser-swiper-wrapper swiper-wrapper">
                                                    <div class="photo-browser-slide swiper-slide swiper-slide-active"
                                                         data-swiper-slide-index="0">
                                                        <span class="swiper-zoom-container"></span>
                                                    </div>
                                                    <div class="photo-browser-slide photo-browser-slide-lazy swiper-slide swiper-slide-next"
                                                         data-swiper-slide-index="1">
                                                        <div class="preloader swiper-lazy-preloader color-white">
                                                            <span class="preloader-inner">
                                                              <span class="preloader-inner-gap"></span>
                                                              <span class="preloader-inner-left">
                                                                  <span class="preloader-inner-half-circle"></span>
                                                              </span>
                                                              <span class="preloader-inner-right">
                                                                  <span class="preloader-inner-half-circle"></span>
                                                              </span>
                                                            </span>
                                                        </div>
                                                        <span class="swiper-zoom-container"></span>
                                                    </div>
                                                </div>
                                                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
            },