微信小程序watch監聽


    /**設置監聽器**/
    export function setWatcher(page) {
        let data = page.data;
        let watch = page.watch;
        Object.keys(watch).forEach(v => {
            let key = v.split('.'); // 將watch中的屬性以'.'切分成數組
            let nowData = data; // 將data賦值給nowData
            for (let i = 0; i < key.length - 1; i++) { // 遍歷key數組的元素,除了最后一個!
                nowData = nowData[key[i]]; // 將nowData指向它的key屬性對象
            }
            let lastKey = key[key.length - 1];
            // 假設key==='my.name',此時nowData===data['my']===data.my,lastKey==='name'
            let watchFun = watch[v].handler || watch[v]; // 兼容帶handler和不帶handler的兩種寫法
            let deep = watch[v].deep; // 若未設置deep,則為undefine
            observe(nowData, lastKey, watchFun, deep, page); // 監聽nowData對象的lastKey
        })
    }
    /**監聽屬性 並執行監聽函數**/
    function observe(obj, key, watchFun, deep, page) {
        var val = obj[key];
        // 判斷deep是true 且 val不能為空 且 typeof val==='object'(數組內數值變化也需要深度監聽)
        if (deep && val != null && typeof val === 'object') {
            Object.keys(val).forEach(childKey => { // 遍歷val對象下的每一個key
                observe(val, childKey, watchFun, deep, page); // 遞歸調用監聽函數
            })
        }
        let that = this;
        Object.defineProperty(obj, key, {
            configurable: true,
            enumerable: true,
            set: function (value) {
                watchFun.call(page, value, val); // value是新值,val是舊值
                val = value;
                if (deep) { // 若是深度監聽,重新監聽該對象,以便監聽其屬性。
                    observe(obj, key, watchFun, deep, page);
                }
            },
            get: function () {
                return val;
            }
        })
    }
    module.exports = {
        setWatcher: setWatcher
    }

頁面引入:

var watch = require('./carddata.js')

 必須在onload中放入:

        watch.setWatcher(this); // 設置監聽器,建議在onload里設置

 完整引入如下:

// 在需要的頁面進行引入
const watch = require("../../../utils/watch.js");

/**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    watch.setWatcher(this); // 設置監聽器,建議在onLoad下調用
    // 取出登錄信息
    this.getLOginInfo();
  },
  watch: {
    'prescriptionInfo.prescr_type': function (value, oldValue) {
      if (value == 0) {
        // console.log('中葯處方');
        let bottled = 'prescriptionInfo.is_bottled';
        let taste_type = 'prescriptionInfo.taste_type';
        let is_pregnant = 'prescriptionInfo.is_pregnant';
        let is_suffering = 'prescriptionInfo.is_suffering';
        let suffering_num = 'prescriptionInfo.suffering_num';
        this.setData({
          [bottled]: 0,
          [taste_type]: 1,
          [is_pregnant]: 0,
          [is_suffering]: 0,
          [suffering_num]: 1,
        });
      }
      if (value == 2) {
        // console.log('膏方');
        let is_pregnant = 'prescriptionInfo.is_pregnant';
        let is_suffering = 'prescriptionInfo.is_suffering';
        let suffering_num = 'prescriptionInfo.suffering_num';
        this.setData({
          [is_pregnant]: 0,
          [is_suffering]: 0,
          [suffering_num]: 3,
        });
      }
    },
  },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM