當前位置:編程學習大全網 - 編程語言 - Axure用中繼器怎麽做商品列表購物車?

Axure用中繼器怎麽做商品列表購物車?

當我們在外賣平臺購買商品時擺放。

中繼器外原件擺放:將購物車圖標、合計金額、配送費、結算按鈕如下圖擺放,並組合轉為動態面板,固定於底部,配送費改為根據需求設定。

三、中繼器表格設置

我們需要添加6列:

picture:代表商品圖片,我們右鍵或者復制粘貼圖片到表格即可;

name:商品名稱;

jieshao:商品介紹;

xiaoshouliang:商品的銷售量;

jiage:商品價格;

shuliang:用戶加入購物車的數量,因為壹開是為0,所以全部填寫0。

填寫表格內數據即可,小提示,可以在excel裏面填寫好再復制粘貼,能夠大大提高效率哦。

四、交互設計

設置中繼器內文本:在中繼器每項加載時,把中繼器表格內對應的數據,設置到對應的文本裏,這裏用設置文本的事件,讓數量文本=[[Item.shuliang]];價格文本=¥[[Item.jiage]],銷售量文本=月售[[Item.xiaoshouliang]],商品介紹文本=[[Item.jieshao]],商品名稱文本=[[Item.name]]。

設置中繼器內圖片:設置好文本後,我們就要設置商品圖片,這裏用設置圖片的交互來完成,設置圖片的值為[[Item.picture]]。

設置減號按鈕是否顯示:其實這個邏輯很容易理解,當數量為0時,商品不能在減少,我們就隱藏減號按鈕,當商品數量不為0的時候就顯示,因為默認是顯示的,所以我們只需要設置當數量為0時,隱藏減號按鈕即可。

條件是數量文本=0時:

設置加/減號按鈕點擊時事件:如果點擊加號的時候,我們設置數量文本在原來的基礎上+1;點擊減號按鈕時,設置數量文本在原來的基礎上-1。

這裏有的同學問這樣會不會減到負數,答案是不會的,因為減到數量為0時,減號按鈕就被隱藏了,具體請看上壹步。

這裏我們需要用更新行來更新表格的數據,有同學可能會問為什麽不改文本,因為如果改文本下面就計算不了合計金額了,但是如果改表格數據,就能計算。

這裏我們更新當前行,如果是加號按鈕,更新行為[[Item.shuliang+1]];減號按鈕則為[[Item.shuliang-1]]。

設置合計金額時間:在中繼器每項加載時,我們需要判斷,如果是第壹行的話我們先要設置合計金額為0元,然後每壹行加載的時候,我們計算合計金額的值為合計金額原來的值(target.text)+該行的價格(item.jiage)*數量(item.shuliang),這樣就可以計算出總額的值。

最終效果:

好咯,關於“Axure用中繼器怎麽做商品列表購物車?”的內容今天就分享到這裏了,希望妳能從中學到東西哦!Axure學習,的Axure相關文章、Axure自學視頻課都是不錯的選擇!文字理解能力強的話,個人推薦Axure文章學習;但是想要專業學習Axure的話,還是推薦大家選擇Axure自學視頻課系統學!不僅可以更加清晰有條理,大家也都能夠利用自己的碎片化時間學習!

  • 上一篇:小時候看過的壹部電影。叫什麽名字
  • 下一篇:epub,pdf,doc等不同格式電子書各有什麽優缺點?如何進行選擇
  • copyright 2024編程學習大全網