## contents組件 #### 視頻地址：?[?http://pan.baidu.com/s/1qWHjmos](http://pan.baidu.com/s/1qWHjmos) contents組件，滑動切換頁面的組件 ### 目錄 [一、綜述](http://wex5.com/cn/?p=8230#001) [二、DOM結構](http://wex5.com/cn/?p=8230#002) [三、樣式](http://wex5.com/cn/?p=8230#003) [四、屬性](http://wex5.com/cn/?p=8230#004) [五、方法](http://wex5.com/cn/?p=8230#005) [六、事件](http://wex5.com/cn/?p=8230#006) [七、操作](http://wex5.com/cn/?p=8230#007) [八、案例](http://wex5.com/cn/?p=8230#008) ### 一.?綜述 contents組件：在.w文件中使用contents組件可以實現不同頁面的展現，特別是可以通過手勢滑動來切換頁面。contents組件使用content來展現頁面，contents組件中可以包括多個content，content可以動態生成，刪除，增強了頁面顯示的靈活性，contents組件和buttonGroup組件配合使用，使用button組件的target屬性關聯content，可以實現按鈕和頁面的綁定 組件路徑：/UI2/system/components/justep/contents 組件標識：$UI/system/components/justep/contents/contents 配合其它組件使用，可實現以下功能： * 滑動切換頁面 * 實現圖片輪換效果 * 模擬門戶打開w頁面 * 新增空白content，并動態創建組件 * contents嵌套contents，分類切換頁面 ### 二.?DOM結構 * 典型dom結構 <div component="$UI/system/components/justep/contents/contents" class="x-contents x-full" active="0" wrap="true" swipe="true" slidable="true" routable="true" xid="contents1"> <div class="x-contents-content" xid="content1"> <!-- 頁面1顯示內容 --> </div> <div class="x-contents-content" xid="content2"> <!-- 頁面2顯示內容 --> </div> </div> ### 三.?樣式 * x-contents contents的基礎樣式 * x-full 充滿整個屏幕 ### 四.?屬性 組件具有公共屬性，請參考[組件公共屬性](http://wex5.com/cn/webcomponents-component/#002 "組件") * active [integer]當前content的索引，一個content就相當于一個顯示的頁面，如果一個contents組件中包含3個content,那么，他們的索引分別是0,1,2。如果當前頁是顯示的第二個頁面，既當前索引為1，那么active的值就是1 * routable [boolean]是否開啟路由，在contents中路由的作用就是指：一訪問這個.w文件，通過指定的URl參數，就能夠顯示到一個指定的頁面！關于路由的介紹請參考：http://wex5.com/cn/?p=2600 * slidable [boolean]是否采用滑動動畫，如果設置為true，那么content頁面切換的時候就會實現左右滑動的效果！設置為false表示普通的頁面切換效果！ * swipe [boolean]是否支持手勢。設置為true表示在手機上可以實現手指滑動切換頁面，設置為false表示禁止手動滑動 * wrap [boolean]是否可循環切換，設置為true，當向右切換頁面到末尾時，繼續切換頁面會切換到第一頁，當向左切換頁面到第一頁時，繼續切換會切換到最后一頁，實現循環效果。設置為false，表示向右切換頁面到末尾時，再次向右切換仍停留在最后一個頁面。向左切換頁面到第一頁時，再次向左切換仍停留在第一頁。不能實現循環效果了！ ### 五.?方法 組件具有公共方法，請參考[組件公共方法](http://wex5.com/cn/webcomponents-component/#003 "組件") * add Content add(object content) 添加一個空的content,添加上這個空頁面后可以參考：http://wex5.com/cn/?p=4202 中“2.2、動態創建組件” 使用js方法為這個頁面動態添加顯示效果！ > 參數 content: [object]content配置 > 返回值 Content > 例: //動態添加一個content！xid為新content定義的id標識， //詳細請參考：http://wex5.com/cn/?p=4202 this.comp(contents).add({xid: xid}) * set void set(json arg) 設置contents的屬性 > 參數 arg:[json]：contents的屬性，結構如下： { "slidable" : {boolean} //是否采用滑動動畫 "wrap" : {boolean} //是否可循環切換 "swipe" : {boolean} //是否支持手勢 } > 返回值 void > 例: //設置采用滑動動畫,可循環切換,不支持手勢 this.comp(contents).set({ "slidable":true, "wrap" : true, "swipe" : false }); * get object get(String name) 獲取contents的屬性，屬性名稱，取值范圍：”slidable”, “wrap”, “swipe”,”active”,”routable”，返回屬性值,結合set方法可以實現contents組件屬性的動態切換效果 > 參數 name: [string]屬性名稱，取值范圍：”slidable”, “wrap”, “swipe”,”active”,”routable” > 返回值 object > 例: //獲取contents是否可循環切換，如果可切換設置為不可切換，如果不可切換設置為可切換， var contents = this.comp(contents); var wrap = contents.get('wrap')； var newWrap; if(wrap){ newWrap = false; }else{ newWrap = true; } contents.set({ "wrap" : newWrap }); * getActiveIndex integer getActiveIndex() 獲取當前active索引,通過此方法可以得到當前頁面是第幾頁，索引是從0開始的！當前索引+1=當前頁面是第幾頁，比如：1.在圖片輪換效果中，圖片對應下標中的提示“第幾張圖片”。2.對應集合中的數據！實現不同的頁面顯示不同的數據 > 參數 無 > 返回值 integer > 例: //獲取contents當前active索引，并在頁面提示這是第幾頁 var array = ['第一頁','第二頁','第三頁']; var index = this.comp(contents).getActiveIndex(); alert(array[index]); * getActiveXid string getActiveXid() 獲取當前激活content的xid,獲取xid后往往可以使用js對此節點經行操作，使用方法：this.getElementByXid(‘xid’)可以獲得此節點的js對象！ > 參數 無 > 返回值 string > 例: //為contents當前激活的頁面設置新的class樣式為abc var xid = this.comp(contents).getActiveXid(); var element = this.getElementByXid(xid); element.setAttribute("class", "abc"); * getIndexByXid integer getIndexByXid(string xid) 通過content的xid獲取索引，獲取索引后可以跳轉到此索引的頁面或其他操作，另外還可以參考[索引作用](http://wex5.com/cn/?p=8230#index) > 參數 無 > 返回值 integer > 例: //通過xid獲取contents指定的索引， var contents = this.comp(contents); var index = contents.getIndexByXid('content的xid'); alert('content的xid對應的的索引是:'+index)； * getLength integer getLength() 獲得content個數,比如：在圖片輪換效果的時候，下標顯示的點數就對應著content的頁數！讓用戶一目了然共有多少張圖片，或者動態添加或刪除content時，也可以使用此方法得到當前共多少頁面！ > 參數 無 > 返回值 integer > 例: var length = this.comp(contents).getLength(); alert('當前共'+ length + '頁') * next void next(function fn) 切換到下一個content,參數是一個回調函數，可選，作用是：頁面切換完成后執行的方法，比如：當你切換到下一個頁面時,才做關于新頁的數據加載和舊頁面的數據銷毀等工作 > 參數 fn: [function][可選]回調函數，作用是：頁面切換完成后執行的方法， > 返回值 void > 例: //頁面切換到下一頁！ var self = this; this.comp(contents).next(function(){ alert('在這里做一些頁面切換后想要做的事情，' +'比如前一個頁面中數據的清空和新頁面中數據的刷新'); self.comp('data1').clear(); self.comp('data2').refreshData(); }); * prev void prev(function fn) 切換到前一個content,參數作用和next方法中的作用是一樣的 > 參數 fn: [function][可選]回調函數，作用是：頁面切換完成后執行的方法， > 返回值 void > 例: this.comp(contents).prev(); * remove void remove(integer index, integer to) 刪除一個content,第一個參數是刪除的content索引，如果第二個參數不存在，那么刪除索引頁后會默認跳轉到第一頁！因為頁面的索引經過了重新排序！當第二個參數存在，指的是跳轉到刪除索引頁面之前，指定的頁面！意思就是先跳轉頁面。后刪除頁面！ > 參數 index: [integer]刪除的content索引 to: [integer][可選][默認為0]要切換到的content索引 > 返回值 void > 例: //刪除第二個content并且切換到第三個content。當刪除完成后， //跳轉到的第三個content的索引已經變成了2 this.comp(contents).remove(2,3); * slide void slide(string transDir, integer transIdx, function fn) 切換到指定content, 同時可以指定切換的方向，第一個參數指的是切換的方向，如果寫錯了，默認會安裝next的方向切換，第二個參數是目標索引，第三個參數是切換完成后的回調方法！可選，作用和next ， prev方法中一樣！ > 參數 transDir: [string][默認為next]切換的方向, ‘prev’或’next’ transIdx: [integer][可選]目標的索引 fn: [function][可選]切換完成執行的方法 > 返回值 void > 例: //切換到第二個content并且指定切換方向為向前 this.comp(contents).slide('prev',2); * to void to(integer | String xidOrIdx, function fn) 切換到指定的content，第一個可以使content索引，類型是整形，也可以是字符串類型，表示要切換到的content的xid。第二個參數可選，是一個回調方法，作用同上 > 參數 xidOrIdx: [integer | String]要切換到的頁面的xid或者索引 fn: [function][可選]切換完成執行的方法, 可選 > 返回值 void > 例: //通過索引切換到指定的content this.comp(contents).to(2); //通過content的xid切換到指定的content this.comp(contents).to('content1'); * getContent Content getContent(String xid) 通過xid獲取content，就可以調用content的方法了，content的方法有void active()和dispose()，進行content激活的銷毀的操作 > 參數 xid: [String] 要獲取content對象的xid > 返回值 Content > 例: //通過xid獲取content,并激活 this.comp(contents).getContent('content1').active(); //通過xid獲取content，并銷毀 this.comp(contents).getContent('content1').dispose(); ### 六.?事件 * onActiveChange void onActiveChange(object event) 當active改變時觸發，在此方法中，通過event的一些內置變量，可以得到舊頁面和新頁面的一些信息 > 參數 event: [object]此參數封裝了上下文中所需的一些變量 > 結構如下: { "source" : 組件的js對象, "to": 新的active值, "from": 原來的active值, "type": "prev"是向前, "next"是向后 } > 返回值 void > 例: Model.prototype.contentsActiveChange = function(event){ //>獲得content個數 alert(event.source.getLength()); //新的active值 alert(event.to); //原來的active值, alert(event.from); // "prev"是向前, "next"是向后 alert(event.type); }; ### 七.?操作 * next 切換到下一個content * prev 切換到上一個content ### 八.?案例 #### 1、滑動切換頁面 ### [](https://box.kancloud.cn/2015-09-23_56019067f34e0.gif) 外賣案例中的滑動切換頁面和按鈕導航切換頁面 * 在contens組件上添加多個content,默認就可以實現頁面切換功能 ### [](https://box.kancloud.cn/2015-09-23_560190725b7e9.gif) 外賣案例設計器中的滑動實現 除了手動滑動還可以配合buttonGroup組件實現導航效果，參考外賣案例，步驟如下： * 在buttonGroup組件上添加多個對應content的按鈕， * 分別將按鈕的target屬性設置上對應的content的xid即可，設置如圖： ### [](https://box.kancloud.cn/2015-09-23_56019073d570e.gif) 外賣案例設計器中的按鈕導航實現 #### 2、實現圖片輪換效果 ### [](https://box.kancloud.cn/2015-09-23_5601908c214b3.gif) 圖片輪換案例 實現： * contents添加上相應數量的content,每個content頁面中添加一個div，并設置背景圖片 * contents組件的class樣式為x-contents，去掉x-full的樣式，這時需要自定義css來指定組件的高度 ### [](https://box.kancloud.cn/2015-09-23_5601908cc2626.gif) 設計器中結構圖 * .w中div顯示圖片的設置如下： <div style="height:100%; background-repeat:no-repeat; background-position:center; background-image:url(./images/1.png);" /> * .css中的代碼如下： .x-contents>.x-contents-content { overflow: hidden; } .x-contents[xid=carousel]{ height:288px; } #### 3、模擬門戶打開w頁面， 門戶打開.w頁面就是：首頁中放了contents組件，打開功能就是new一個content，為這個content頁面綁定一個.w頁面，平臺提供的工具類實現了這個方法：loadContent(this.comp(“contents的xid”),’content的xid’, require.toUrl(“.w路徑”))， 詳情請參考：http://wex5.com/cn/?p=5013#1.3 #### 4、空白content中動態創建組件 使用js動態創建的content頁面是空白的！需要往里面添加內容，案例中提供了兩種方法可以實現content中添加內容，分別是justep.Component.addComponent和justep.Bind.addNodes 詳情請參考：http://wex5.com/cn/?p=4202#2.2 #### 5、contents嵌套多個contents分類切換頁面 說明：一般情況下不需要contents的嵌套！如果是代碼中想分類管理一些頁面，包括頁面新增，刪除，排序等，這樣做對于代碼維護比較清晰 ### [](https://box.kancloud.cn/2015-09-23_5601909972346.gif) 多個contents嵌套頁面切換 * contents添加上相應數量的content,每個content頁面中再次添加contents組件，這些子contents組件中實現頁面具體的功能 ### [](https://box.kancloud.cn/2015-09-23_5601909a165ff.gif) 設計器中contents嵌套頁面實現 代碼示例： ###### js方法，點擊按鈕事件中實現下一頁（上一頁或跳轉指定頁面，原理類似） Model.prototype.btnNextClick = function(event){ //根據xid得到外層contents組件對象 var pages = this.comp('pages'); //得到外層contents組件當前頁的索引 var pagesActiveIndex = pages.getActiveIndex(); //根據索引和子contents組件的xid的關系，得到子content組件 var page = this.comp('page'+pagesActiveIndex); //子contents組件中的content個數 var pageLen = page.getLength(); //子contents組件中的當前content的索引 var pageActiveIndex = page.getActiveIndex(); //如果當前子contents組件中的content總數量大于當前索引+1（因為索引是從0開始的）就切換子的頁面，否則切換父的頁面，并指定下一個子contents的頁面為第一個content if(pageLen > pageActiveIndex+1){ page.next(); }else{ pages.next(); page = this.comp('page'+pagesActiveIndex++); page.to(0); } }; **源代碼請參考版本中模型相關：** 按鈕邦迪動態頁面：/UI2/takeout/index.w 圖片輪換:/UI2/portal/sample/main/main.w content頁面顯示其他.w:/UI2/portal/sample/index.w