當我們在外賣平臺購買商品時擺放。
中繼器外原件擺放:將購物車圖標、合計金額、配送費、結算按鈕如下圖擺放,並組合轉為動態面板,固定於底部,配送費改為根據需求設定。
三、中繼器表格設置我們需要添加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自學視頻課系統學!不僅可以更加清晰有條理,大家也都能夠利用自己的碎片化時間學習!