BUI 控件用法

2020-08-12 11:04 更新

前言

前面快速開始已經(jīng)講解了控件的最基本用法, 學(xué)一個就會全部了. 控件之間還可以相互嵌套, BUI的控件主要可以分為3類:

  • 滑動交互控件: 例如:

  • 焦點圖bui.slide, 選項卡bui.tab,列表下拉刷新及滾動加載bui.list , 下拉刷新bui.pullrefresh, 滾動加載bui.scroll, 抽屜控件bui.swipe, 側(cè)邊欄bui.sidebar, 側(cè)滑菜單bui.listview, 日期選擇 bui.pickerdate.

  • 點擊交互控件: 例如:
    • 上拉菜單bui.actionsheet,下拉菜單bui.dropdown,折疊菜單bui.accordion,選擇菜單bui.select,星級評分bui.rating,步驟條bui.stepbar,層級選擇bui.levelselect.

  • 彈出交互控件: 例如:
    • 遮罩bui.mask,正在加載bui.loading, 彈窗控件bui.dialog,提醒框bui.alert,確認(rèn)框bui.confirm,輸入框bui.prompt,自動消失提醒bui.hint

注意:

  • BUI的控件主張以相同交互作為相同控件, 也就是一個控件不只做一件事, 比如, tab 是由 bui.slide 實現(xiàn)的, 結(jié)構(gòu)一致,交互一致,配合樣式來實現(xiàn)不同的效果.
  • 參數(shù) height:0 則是會自動計算高度,在布局比較復(fù)雜的情況下,需要自己計算后傳進去.
  • 每個控件都有一個全局配置,可以修改控件的默認(rèn)配置bui.config.控件名.參數(shù).

控件初始化

bui.list 為例, 對控件的詳細(xì)用法實例講解. 這是每個應(yīng)用都會用到的控件. 可以先了解下bui.list API

例子: 列表下拉刷新,滾動加載

效果預(yù)覽:

效果預(yù)覽

生成結(jié)構(gòu), bui-fast 快速書寫 ui-list tab

  1. <div id="uiScroll" class="bui-scroll">
  2. <div class="bui-scroll-head"></div>
  3. <div class="bui-scroll-main">
  4. <!-- 這里是滾動的內(nèi)容區(qū),如果不是ul,則需要修改對應(yīng)的參數(shù) -->
  5. <ul class="bui-list">
  6. </ul>
  7. </div>
  8. <div class="bui-scroll-foot"></div>
  9. </div>

初始化, bui-fast 快速書寫 bui-list tab

  1. var uiList = bui.list({
  2. id: "#uiScroll",
  3. url: "http://www.easybui.com/demo/json/shop.json",
  4. pageSize:5,
  5. data: {},
  6. //如果分頁的字段名不一樣,通過field重新定義
  7. field: {
  8. page: "page",
  9. size: "pageSize",
  10. data: "data"
  11. },
  12. template: function (data) {
  13. var html = "";
  14. data.map(function(el, index) {
  15. html +=`<li class="bui-btn bui-box">
  16. <div class="bui-thumbnail"><img src="${el.image}" alt=""></div>
  17. <div class="span1">
  18. <h3 class="item-title">${el.name}</h3>
  19. <p class="item-text">${el.address}</p>
  20. <p class="item-text">${el.distance}公里</p>
  21. </div>
  22. <span class="price"><i></i>${el.price}</span>
  23. </li>`
  24. });
  25. return html;
  26. }
  27. });

bui.list控件有個新手比較難理解的地方,就是field字段映射, 經(jīng)常出不來數(shù)據(jù). templateList 接收的數(shù)據(jù)來源于你配置的字段, 返回數(shù)組才能做對應(yīng)的分頁比對.

例如: 請求的接口是

  1. http://www.easybui.com/api/getList?pagination=1&pagesize=9

假設(shè)返回的數(shù)據(jù)是

  1. {
  2. code: "200",
  3. results: [{
  4. id: "123"
  5. name: "新聞標(biāo)題"
  6. }]
  7. }

bui.list的初始化, field的值應(yīng)該是, 默認(rèn)字段, page:"page",size:"pageSize",data:""

  1. var uiList = bui.list({
  2. id: "#uiScroll",
  3. url: "http://www.easybui.com/api/getList",
  4. data: {},
  5. field: {
  6. page: "pagination", // 頁碼字段
  7. size: "pagesize", // 頁數(shù)字段, 相同字段可以不傳
  8. data: "results" // 返回的數(shù)據(jù), 空則是整個數(shù)據(jù)
  9. },
  10. page:1,
  11. pageSize:10
  12. })

如果數(shù)據(jù)存在多層results.data, 則字段也需要像對象訪問一樣.

使用方法

uiList的實例來源于前面的例子初始化

  1. uiList.refresh();

事件監(jiān)聽

事件全部為小寫

  1. // 刷新的時候觸發(fā)
  2. uiList.on("refresh",function(result){
  3. });

修改參數(shù)

option 方法

通過option方法可以在控件初始化以后,重新修改初始化參數(shù), 跟 init方法的區(qū)別是, option方法不一定會重新初始化, 比方在修改數(shù)據(jù)參數(shù)的時候.

例子: 修改下次請求的參數(shù)

  1. uiList.option("data",{
  2. "lastId":"123",
  3. })

獲取依賴

widget 方法

通過widget方法,可以獲取控件的內(nèi)部依賴, 比方 bui.list = bui.scroll + bui.ajax組合而成.

例子: 獲取內(nèi)部scroll的實例

  1. 返回所有依賴實例
  2. var listWidget = uiList.widget();
  3. 引用內(nèi)部的scroll
  4. var scroll = uiList.widget("scroll");
  5. 調(diào)用scrollTop方法返回頂部
  6. scroll.scrollTop();

控件嵌套

例子1: Tab嵌套Tab

控件跟控件之間的相互嵌套, 甚至里面還可以繼續(xù)嵌套列表刷新, 跟列表側(cè)滑.

效果預(yù)覽

效果預(yù)覽

代碼分析

例如: 底部tab第1屏嵌套tab

一個Tab的結(jié)構(gòu), bui-fast 快速書寫 ui-slide-tab tab

  1. <div id="uiSlideTabChild" class="bui-tab">
  2. <div class="bui-tab-head">
  3. <ul class="bui-nav">
  4. <li>
  5. 第1屏-1-菜單
  6. </li>
  7. <li>
  8. 第1屏-2-菜單
  9. </li>
  10. </ul>
  11. </div>
  12. <div class="bui-tab-main">
  13. <ul>
  14. <li>
  15. 第1屏-1-內(nèi)容
  16. </li>
  17. <li>
  18. 第1屏-2-內(nèi)容
  19. </li>
  20. </ul>
  21. </div>
  22. </div>

合并在一塊以后,因為tab菜單在底部,所以把菜單部分結(jié)構(gòu)抽離到footer,初始化menu參數(shù)用id

  1. <main>
  2. <div id="uiSlideTab" class="bui-tab">
  3. <div class="bui-tab-main">
  4. <ul>
  5. <li>
  6. <!-- 第1屏 -->
  7. <div id="uiSlideTabChild" class="bui-tab">
  8. <div class="bui-tab-head">
  9. <ul class="bui-nav">
  10. <li>
  11. 第1屏-1-菜單
  12. </li>
  13. <li>
  14. 第1屏-2-菜單
  15. </li>
  16. </ul>
  17. </div>
  18. <div class="bui-tab-main">
  19. <ul>
  20. <li>
  21. 第1屏-1-內(nèi)容
  22. </li>
  23. <li style="display:none;">
  24. 第1屏-2-內(nèi)容
  25. </li>
  26. </ul>
  27. </div>
  28. </div>
  29. </li>
  30. <li style="display:none;">
  31. 第2屏
  32. </li>
  33. </ul>
  34. </div>
  35. </div>
  36. </main>
  37. <footer>
  38. <ul id="uiSlideTabNav" class="bui-nav">
  39. <li class="bui-btn active">Tab1</li>
  40. <li class="bui-btn">Tab2</li>
  41. </ul>
  42. </footer>

初始化 bui-fast 快速書寫 bui-tab tab

  1. // 底部菜單TAB
  2. var uiSlideTab = bui.tab({
  3. id:"#uiSlideTab",
  4. menu:"#uiSlideTabNav"
  5. })
  6. // 第1屏的TAB
  7. var uiSlideTabChild = bui.tab({
  8. id:"#uiSlideTabChild"
  9. })
  10. // 禁止滑動操作,最新,最熱.
  11. uiSlideTabChild.lock();

你可以選擇讓滑動操作TAB在哪一層, 如果沒有手動設(shè)置,默認(rèn)只滑動最底層結(jié)構(gòu).

例子2: 列表控件嵌套列表側(cè)滑

效果預(yù)覽

在線預(yù)覽

列表側(cè)滑控件需要右鍵打開,并開啟chrome模擬,才能滑動.

手機預(yù)覽

例子2:

代碼分析

這里就是一個ui-list生成的列表結(jié)構(gòu), 注意, ul 標(biāo)簽上的class 是 bui-listview, 所以bui.list初始化需要傳一個children參數(shù)

  1. <div id="scrollListview" class="bui-scroll">
  2. <div class="bui-scroll-head"></div>
  3. <div class="bui-scroll-main">
  4. <ul id ="scrollList2" class="bui-listview"></ul>
  5. </div>
  6. <div class="bui-scroll-foot"></div>
  7. </div>

初始化

  1. // 列表控件
  2. var uiList = bui.list({
  3. id: "#scrollListview",
  4. url: "http://www.easybui.com/demo/json/userlist.json",
  5. children:".bui-listview",
  6. handle:"li",
  7. page:1,
  8. pageSize:9,
  9. template: function (data) {
  10. var html = "";
  11. $.each(data,function(index, el) {
  12. html +='<li status="1" style="height:46px;">';
  13. html +=' <div class="bui-btn bui-box">';
  14. html +=' <div class="span1">'+el.name+'</div>';
  15. html +=' <i class="icon-listright"></i>';
  16. html +=' </div>';
  17. // 側(cè)滑菜單結(jié)構(gòu)
  18. html +=' <div class="bui-listview-menu swipeleft">';
  19. html +=' <div class="bui-btn primary">修改</div>';
  20. html +=' <div class="bui-btn danger">刪除</div>';
  21. html +=' </div>';
  22. html +='</li>';
  23. });
  24. return html;
  25. },
  26. field: {
  27. data: "data"
  28. }
  29. });
  30. // 列表側(cè)滑控件, 沒有采用動態(tài)生成菜單
  31. var uiListview = bui.listview({
  32. id: "#scrollList2",
  33. callback: function (e,menu) {
  34. //關(guān)閉菜單
  35. menu.close();
  36. }
  37. });

關(guān)鍵代碼在于模板的生成, li標(biāo)簽上有 status=1 屬性, 并且還有高度樣式, 這是告訴bui.listview控件,菜單按鈕我已經(jīng)生成了,你不要再生成了, 減少重復(fù)渲染.

高級定制

一切都在你理解了控件的實現(xiàn)原理,API方法以后,對于定制才能得心應(yīng)手, 像

  • 通知公告,選項卡,多圖滑動都是基于bui.slide定制,
  • bui.list,bui.scroll,基于bui.pullrefresh定制,
  • bui.sidebar,bui.listview基于bui.swipe定制,
  • bui.actionsheet,bui.alert,bui.confirm,bui.prompt基于bui.dialog定制

等等, 都是基于他們交互相同擴展出來的例子, 這里我再舉兩個例子.

例子1: 做一個返回頂部的功能.

你可能會首先想到用position:fixed來做一個懸浮的操作, 很抱歉,IOS下不支持fixed的表現(xiàn). 這也是為什么bui采用計算的方式來實現(xiàn)main滾動的原因,其次你要知道,你當(dāng)前操作的是哪個滾動條.

bui的標(biāo)準(zhǔn)結(jié)構(gòu),footer標(biāo)簽里面的內(nèi)容,就會固定在底部.

  1. <div class="bui-page">
  2. <header class="bui-bar">
  3. <div class="bui-bar-main">返回頂部</div>
  4. </header>
  5. <main></main>
  6. <i class="icon-listup"></i>
  7. <footer></footer>
  8. </div>

簡單修飾下這個按鈕,并給要操作返回頂部的地方,加上ID

  1. <div class="bui-page">
  2. <header class="bui-bar">
  3. <div class="bui-bar-main">返回頂部</div>
  4. </header>
  5. <main id="scrollMain"></main>
  6. <div class="bui-btn round btn-scrolltop"><i class="icon-listup"></i></div>
  7. <footer></footer>
  8. </div>

  1. .btn-scrolltop {
  2. position:absolute;
  3. bottom: .8rem;
  4. right:.15rem;
  5. z-index: 10;
  6. }

  1. $(".btn-scrolltop").on("click",function(e){
  2. document.querySelector("#scrollMain").scrollTop = 0;
  3. })

注意: 這里如果是一個TAB,滾動的地方在 li標(biāo)簽 .bui-tab-main & ul & li

例子2: 省市區(qū)層級選擇

這是一個綜合例子, 結(jié)合事件方法一起使用, 理解了這個例子, 才算真的理解BUI的控件的靈活之處.

綜合例子

上面的代碼不能請求外部數(shù)據(jù),想要預(yù)覽效果,可以點擊下面地址.

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號