angular TV端焦點移動外掛程式 畫廊效果實現

2022-05-27 01:57:15 字數 956 閱讀 6808

angulartv端焦點移動外掛程式 ng-tv-focusable

npm文件

安裝

npm i -s ng-tv-focusable
import  from 'ng-tv-focusable';

@ngmodule()

tv.component.ts元件中的html(css有點多,此處就不寫了):

}      

tv.component.ts元件中的js

import  from 'ng-tv-focusable';

ngafterviewinit() );

$tv.setscrollel(document.queryselector('.item-box'))

$tv.requestfocus($tv.getelementbypath("//div[@class='perspective']/div[3]"));

} ngondestroy()

abs(num)

skip(index),1000)

}} nofocus(event)

right(index, event)

this.activeindex = index + 1;

} left(index,event)

this.activeindex = index - 1;

}

解釋:

1.指令focusable設定可獲取焦點的div

2.新增自定義事件(left),(right),按左右按鍵來計算當前層級以及縮放比例

3.新增自定義事件(up),(down),按上下按鍵的時候阻止焦點跳動

4.新增click事件,按ok鍵盤的時候跳轉詳情頁

最終介面:

回車移動焦點

回車到下一行 protected override bool processdialogkey system.windows.forms.keys akey return true return base.processdialogkey akey 按鍵處理 按鍵訊息 按鍵資料 protected ...

移動端ios系統中表單標籤無法獲取焦點

做移動端網頁的時候發現在ios系統中表單元件無法獲取焦點,無法輸入 webkit touch callout none webkit touch callout none 阻止長按之後呼出選單提示複製的行為 禁用webkit核心瀏覽器的文字大小調整功能。webkit text size adjust...

input自動獲取焦點在移動端自動彈出手機軟鍵盤

一 input自動獲取焦點 正常來說,在input標籤新增autofocus屬性就可以了。如下 id search type search placeholder 搜尋 autofocus autofocus input 二 在使用iscroll框架元件的頁面實現input自動獲取焦點 因為iscr...