wex5這門課平時也沒怎么學，只有期末突擊！下面是這段時間學到的知識！
主從表
實作要求
請設計一個頁面，完成如下效果：
提示：效果圖中資料顯示及表頭顯示
采用的行組件，沒有使用list，
表頭標簽使用HTML分組中的label，
指標移動按鈕為頁面底部的按鈕組，非獨立按鈕組件，
紅色橫線通過設定行組件的底邊樣式實作，
實作效果
解答
1、先在model里面建立兩個本地資料表，建好后的資料表如圖顯示，
student資料表
nation資料表
2、建立好資料表后，建立基本的頁面，
在content板塊加一個contents組件，在contents組件里面加一個content內容頁，再在其中加入一個row，在row中加入x-col,再在x-col加入一個output，結果如圖所示，
3、在panel面板添加底部區域
在底部區域中加入一個按鈕組buttonGroup1，并添加兩個按鈕，并將buttonGroup1的class屬性的排列方式設定為btn-group-justified，再將button1和button2的label設定為上一條和下一條，
4、在第一行系結標簽名，第二行系結資料，
系結標簽名
系結資料
5、對button1和button2設定上一頁和下一頁的點擊事件
6、給model的student資料表設定改變事件，并在js里面寫如下代碼，如圖，
7、紅色實作在style里面自己寫屬性border-top:thick solid red;
結果顯示
購物車
實作要求：
根據效果圖設計一個app，資料從json資料檔案中加載，json資料檔案及圖片在素材中提供，
App主要實作如下功能：
1.從json檔案中加載資料到資料組件中并顯示；
2.加入購物車，每次添加1份，多份的情況多次添加；
3.瀏覽購物車；
實作效果
解答
1、資料表
foodData
carData
2、bottom底部添加buttonGroup，并添加兩個button，修改button的label屬性為瀏覽和購物車，
3、panel面板結構
在contents組件里面加入兩個content頁面，修改xid分別為showContent和shopCarContent，將兩個button分別target到對應的頁面，
4、頁面
由于瀏覽頁面許多資料都是類似顯示的，所以我們可以在showContent頁面添加一個list組件，再再list里面添加一個row行組件，再添加3列，第一列放圖片組件，第二列添加兩行，一行為名稱，另一行為單價，第三列添加一個button，
5、在list系結資料表foodData
6、圖片系結在bind-attr-src自己寫路徑，當前路徑下的a2_images下的imgurl的val，
7、再將屬性和值分別系結
由于名稱和單價的系結類似，這里只展示名稱的系結，
由于button這里需要系結點擊事件，我們先把shopCarContent頁面建立出來，如圖所示，
8、我們先給model添加加載JSON檔案的事件，
9、并在js中寫下如下代碼：
Model.prototype.modelLoad = function(event){
var foodData=this.comp("foodData");
$.get("data.json",function(data){
foodData.newData({
"defaultValues":data
})
})
};
10、然后，再給button添加點擊事件，
11、并在js中寫如下代碼：
Model.prototype.button4Click = function(event){
var row=event.bindingContext.$object;///獲取系結的當前行
var carData=this.comp("carData");
var arr=carData.find(["cname"],[row.val("cname")]);
if(arr.length==0)
{
carData.newData({
"defaultValues" :[{
"cname":row.val("cname"),
"price":row.val("price"),
"count":1
}]
});
}else
{
arr[0].val("count",arr[0].val("count")+1);
}
alert("添加成功");
};
加載JSON資訊
要求
根據效果圖設計一個app，
其中按鈕采用按鈕組來實作，顯示在頁面底部，
資料從json資料檔案中加載，json資料檔案及資料項由考生自行設定，
Json檔案中不低于3條資料，
性別欄位設定規則只能輸入“男”或“女”，
實作效果
解答
1、先在model里面創建一個資料表，改名為studentData，并添加如圖所示的欄位，
2、在content內容頁添加如圖所示的組件，
每一行的第一列系結資料的label，第二列系結資料的val，
3、添加底部面板，并添加一個button，給每一個按鈕添加事件，
同理，下一條也是類似的方法，
4、最后的加載JSON資料的按鈕需要系結點擊事件，
在js中寫如下代碼：
Model.prototype.button3Click = function(event){
var studentData=this.comp("studentData");
$.get("data.json",function(data){
studentData.newData({
"defaultValues":data
});
});
};
5、選中資料表，右鍵編輯規則，選擇sex，并設定約束，
6、最后，顯示效果如下
總結
Wex5 App這門課程學的東西不是很多，主要是軟體已經給我們封裝好了，只需要我們拖動即可，只要認真學，肯定沒有問題的！加油，各位！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/389212.html
標籤：其他