如何构建自定义PhotoBrowser Framework7-Ver3页面，其中包含输入文本可以接受图像索引号。
在文档中，我看到了他们的选项“ renderPage”，但是当我使用它时，我得到了一个空页面 ...如何使用自定义布局或大多数返回的html模板来运行photoBrowser “ renderPage”方法？
谢谢
答案 0 :(得分：1)
我通过从framwork7中生成的html中获取模板来找到答案
这样，我将在此处设置生成的模板，然后您可以删除或添加任何自定义/构建组件。
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>`;
},