鍵盤事件控制場景地圖切換場景

1.1 應用場景

使用者實際使用 場景地圖 時，可能需要透過翻頁筆或者鍵盤上下鍵來控制場景切換，那麼該如何實現呢？

1.2 實現思路

企業戰情室場景下，透過給決策報表的 body 新增初始化後 JavaScript 事件，給場景地圖綁定鍵盤的上下鍵事件, 監聽上鍵跳轉上一個場景, 下鍵跳轉下一個場景。

注：支援在場景地圖輪播的同時使用鍵盤事件控制場景切換。

注：不支援行動端。

2.1 準備範本

此處直接使用 場景切換地圖範例 中的範本。

也可以點選此處直接下載：場景切換地圖.frm

2.2 新增事件

給決策報表的 body 新增一個初始化事件，如下圖所示：

JavaScript 程式碼如下：

document.addEventListener('keydown', e => {
     
    //獲取圖表物件實體
    var chartBridge = Van.Utils.getChartBridge({name:'chart0'});
 
    if (chartBridge && e.keyCode === 38) {//遙控器的上 對應鍵盤的上keyCode=38 左 37 右 39
        console.log('up');
         
        //切換至上一個場景
        chartBridge.switchScene({direction:'previous'});
        //可以根據自己的需求綁定不同的js事件 比如tab組件切換切換到tab0：
        //_g().options.form.getWidgetByName("tabpane0").showCardByIndex(0);
 
    } else if (chartBridge && e.keyCode === 40) {//遙控器的下 對應鍵盤的下keyCode=40
        console.log('down');
         
        //切換至下一個場景
        chartBridge.switchScene({direction:'next'});
        //可以根據自己的需求綁定不同的js事件 比如tab組件切換到tab1：
        //_g().options.form.getWidgetByName("tabpane0").showCardByIndex(1);
    }
     
});
显示代码

點選下載範本：鍵盤事件控制場景地圖切換場景.frm