青青久久91精品,本子库绅士库全彩里番免费,无码h动漫肉嫁在线播放

多頁模板

多頁模板就是傳統(tǒng)的模板, 每一個多頁模板都需要有一個,且只能有一個bui.ready. 多頁模板簡單方便.

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>BUI 多頁開發(fā)標(biāo)準(zhǔn)頁面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  />
  <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="bui-page bui-box-vertical">
        <header>
            <!-- 固定頂部區(qū) -->
            <div class="bui-bar">
                <div class="bui-bar-left">
                    <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
                </div>
                <div class="bui-bar-main">模板頁</div>
                <div class="bui-bar-right">
                </div>
            </div>
        </header>
        <main>
          <!-- 固定中間滾動內(nèi)容區(qū) -->
        </main>
        <footer>
          <!-- 固定底部   -->
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js" rel="external nofollow" ></script>
        <script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js" rel="external nofollow" ></script>
    <script>
        bui.ready(function() {
          // 所有控件及方法需要在這里執(zhí)行
        })
    </script>
  </body>
</html>

單頁模板

單頁模板不需要引入一堆腳本樣式, 跟組件模板一致, 就是一個簡單html結(jié)構(gòu). 單頁模板的命名跟模塊的命名默認(rèn)保持一致, 路徑一致的方式.

<div class="bui-page bui-box-vertical">
    <header>
        <!-- 固定頂部區(qū) -->
        <div class="bui-bar">
            <div class="bui-bar-left">
                <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
            </div>
            <div class="bui-bar-main">單頁模板</div>
            <div class="bui-bar-right">
            </div>
        </div>
    </header>
    <main>
      <!-- 固定中間滾動內(nèi)容區(qū) -->
    </main>
    <footer>
      <!-- 固定底部   -->
    </footer>
</div>

模板里面可以增加樣式.

<style>
  .bui-page .bui-bar {
    background:red;
  }
</style>
<div class="bui-page bui-box-vertical">
    <header>
        <!-- 固定頂部區(qū) -->
        <div class="bui-bar">
            <div class="bui-bar-left">
                <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
            </div>
            <div class="bui-bar-main">單頁模板</div>
            <div class="bui-bar-right">
            </div>
        </div>
    </header>
    <main>
      <!-- 固定中間滾動內(nèi)容區(qū) -->
    </main>
    <footer>
      <!-- 固定底部   -->
    </footer>
</div>

像上面的寫法會影響全局. 應(yīng)該在 bui-page 加多一個獨(dú)有的樣式, 才能避免相互影響.

<style>
  .page-home .bui-bar {
    background:red;
  }
  .page-home main {
    background:#ddd;
  }
</style>
<div class="bui-page bui-box-vertical page-home">
    <header>
        <!-- 固定頂部區(qū) -->
        <div class="bui-bar">
            <div class="bui-bar-left">
                <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
            </div>
            <div class="bui-bar-main">單頁模板</div>
            <div class="bui-bar-right">
            </div>
        </div>
    </header>
    <main>
      <!-- 固定中間滾動內(nèi)容區(qū) -->
    </main>
    <footer>
      <!-- 固定底部   -->
    </footer>
</div>

組件模板

跟單頁模板一樣, 但顆粒度會更小一點. 比方輪播圖.

pages/components/slide/index.html

<div class="bui-slide"></div>

模板標(biāo)簽

上面定義的模板, 可以使用view標(biāo)簽局部加載到頁面中, 默認(rèn)是不編譯的. 主要用來配合bui.store, 初始化了bui.store才能編譯.

<view name="pages/components/slide/index"></view>

view標(biāo)簽屬性

view有3個內(nèi)置的屬性. 支持自定義屬性, 具體查看組件的傳參.

name="xxx" 模塊名.
render="true" 代表已經(jīng)渲染結(jié)束,不會再次渲染.
delay="true" 代表暫時不加載,直到調(diào)用 loader.delay方法. 查看組件的延遲加載

view延遲加載

不會自動加載模板, 直到手動調(diào)用 loader.delay方法.

<view class="delayview" name="pages/list/index" delay="true"></view>

loader.delay({
  id: ".delayview"
})

模板手動編譯

loader.view

<view id="slide" name="pages/components/slide/index"></view>

loader.view({
  id: "#slide"
})

BUI 模板

多頁模板

單頁模板

組件模板

模板標(biāo)簽

view標(biāo)簽屬性

view延遲加載

模板手動編譯