• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      Axure中繼器實現APP中設置頁面的各種列表

      中繼器是Axure中的一個高級元件,可以當做Axure中的小型數據庫使用,用于實現一些增刪查改的效果,同時可用于一些具有相同元件組合的組件的快速生成,比如APP中的設置,如下圖所示。下面我們介紹一下怎么用中繼器實現。

      中繼器基礎知識

      我們先介紹一下中繼器的基礎知識,拖入一個中繼器,可以看到顯示的是縱排的三個矩形框,框中內容分為為1,2,3,交互中有一個事件每項加載時,元件動作是設置矩形框的文本為Item.Column0,點擊樣式,可以看到有一個數據表格,默認只有一列Column0,列中數據為1,2,3。雙擊中繼器,可以看到其中只有一個矩形框。

      從中不難看出以下幾點:

      1)雙擊進入中繼器后,添加的各種元件相當于中繼器本身的模板,后面會按這個模板進行渲染;

      2)模板渲染多少次是由樣式中數據表的行數決定的,比如默認只有三行數據,就只生成了三個矩形框;

      3)樣式表中的每一行數據就是每次渲染時可以傳入模板中的數據,數據傳入需要通過中繼器的“每項加載時”這個事件進行觸發設置,比如比如默認的是把Column0這列的數據傳給了矩形框。通過增加列,可以增加每次渲染時可以使用的數據,列名可以自定義(英文字符)。

      最后,數據表中的數據除了字符串外,通過右鍵還可以引入圖片或則頁面,這個功能非常強大,下面我們將要用到。

      有了上面的基礎,我們就可以開始制作了。首先我們要確定一下我們的模板組成,對于不帶圖表的,應該要包含一下元件:

      1)一個矩形框,用于規定模板的邊界大小,同時用于裝載選項的名字,邊框不顯示,元件命名為”選項名“,注意設置文字的左邊距;

      2)一個swich切換開關;

      3)一個標簽,用于存放右側的提示文字,命名為”提示文字“,注意選擇右對齊;

      4)一個“>”符號;

      5)一根直線,放于底邊,作為每行的分隔線,命名為”分隔線“。

      如下圖所示,把這幾個元素組合好。

      在數據表中輸入下面的內容,一共四行數據,表示我們要生成四個選項。

      name表示選項名;

      switch為標志位,如果需要使用開關按鈕就填入true,否則不填,為true時后面都不用填;

      option是選項右側的文字,如果不需要則不填;

      dayufu為標志位,需要顯示大于符號時填true,與switch不能同時設置;

      pageUrl用于引用頁面,對于設置了大于符號的項,一般都要跳轉頁面,直接引用該頁面即可。

      數據和模板都設置好了,下面要控制每一項渲染時的數據傳入,首先先設置文字類的數據,主要有兩個:

      1)把模板中的選項名設置為Item.name;

      2)把提示文字設置為Item.option。

      通過fx中插入變量,Item表示中繼器本身。

      這樣設置以后,顯示如下:

      接下來就是控制顯示switch開關還是顯示”>“符號,這個可以為模板添加載入事件,在載入時判斷改行的數據switch是否為true,不為true時將其隱藏,否則將”提示文字“和”>”符號隱藏:

      最后為模板添加一個單擊事件,當pageUrl不為空時,執行打開鏈接的操作。

      最后,最后一項一般是沒有分隔線的,這個可以用到中繼器中的一個變量isLast,就是當前項是不是中繼器中的最后一項,是的話,這個值是true。因此我們可以單獨為下劃線加入一個載入時的事件(放在模板組合上也可以),這樣最后一項的分隔線就不顯示了。

      帶圖標的

      下面在以上的基礎上再實現一個帶圖標的,有了以上基礎,其實就比較簡單了,就是在模板里面添加一個圖片元件。

      在數據表中增加一列pic,右鍵從本地引入圖標(推薦從阿里巴巴矢量圖標庫下載png圖片)

      然后在“每項加載時”增加一個設置圖片的元件動作即可。由于有些png圖片的空白邊距過大,可能導致顯示的圖標大小不一,所以可以先把圖標自己編輯一下。

      最后,中繼器自身還有一些變量如

      index: 當前行的序號;

      isFirst: 是不是第一行;

      isEven: 是否是偶數行;

      isOdd: 是否是奇數行;

      isMarked: 是否是標記行

      等等,可以用于很多判斷和篩選。

      https://www.axureshop.com/shop/24308中有一些綜合實戰案例,歡迎大家下載交流學習。

      下載本教程的源文件》》

      給TA買糖
      共{{data.count}}人
      人已贊賞
      高級教程

      Axure教程:使用中繼器和動態面板制作自定義下拉框(一)

      2020-1-11 11:52:00

      高級教程

      Axure生成預覽地址如何能查看到被瀏覽次數呢?

      2020-11-27 16:02:19

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">