前言

知道mobx這個東西 很久了 大概也就1個多月了吧
但是從來沒有下筆寫過程式碼
這兩天嘗試了一下 大概去熟悉了一下Mobx的相關命令
從而實現了 這個比較簡單的購物車例項
如果有寫的不對的地方 可以直接聯絡我的QQ:469373256

專案原始碼:
https://github.com/fangkyi02/Demo
因為專案很簡單 所以就直接貼程式碼了
頁面部分寫的不是特別美觀 還望見諒啊

程式碼

程式碼結構

紅色部分儲存了listitem的資料跟檢視
黃色部分是對於其的引用

主體實現部分

這裡不過多介紹 一看就明白了

ListItemData

ListItemView

這裡有兩點需要注意
1.observe是用來監聽某一項的改變的
在這個回撥裡面 如果全選狀態被改變 那麼在這邊就會被攔截到
然後將當前的item選中狀態改成跟全選一樣

也許有人會說 這邊這麼沒有寫item選中以後的動作呢

2.首先來解釋一下 flatlist的話 它是有回收機制的 也就是說 你雖然在當前遮蔽點選了選中 並且狀態進行了改變 但是 當你在繼續往下滑動的時候 會出現狀態依舊沒有選中
其次 在那邊寫的話 點選全選 根本無法做出全選的效果
因為flatlist他不是整個全部都顯示出來 而是根據你滑動來載入後面的資料
他預設只加載了你能看到的資料
所以 如果你在監聽那邊將當前的總金額進行累加的話 你只能累加顯示出來的金額 而不能把未顯示出來的金額也累加計算進去

LIstItemView_render部分

這部分不過多介紹

事件處理部分

大體來講一下部分邏輯
我們的當個物品的金額計算方式
金額 = 標價 * 數量

所以 根據這個原則
當我們點選+ 或者 -的時候
我們這時候要做的 就是修改當前選中值
並且同時修改總金額
但是 這裡有個前提是 我們當前已經被選中的情況
否則就會出現資料混亂

所以 當我們按下選中按鈕的時候 就應該將金額這個值加進總金額裡面
反之 取消的時候 也要從總金額裡面減少這個值的錢

ok 邏輯就這麼簡單

結尾

是不是感覺講的有點快
主要是因為本身就很簡單 可以講的東西 就那麼一點 兩三句就講完了
如果有不懂的 可以自己去下原始碼 自己電腦執行一下
專案原始碼:

如果原始碼裡面有寫的不對的地方 也可以聯絡我QQ：469373256