基于對移動搜索領(lǐng)域用戶的深度調(diào)研及多維度訪談分析，圖片支持手勢縮放、滑動切換等交互操作已成為用戶群體的普遍認(rèn)知與核心需求。圖片查看功能作為搜索移動端理想體驗的關(guān)鍵環(huán)節(jié)，能夠顯著提升用戶對圖文信息的獲取效率與沉浸感。為滿足合作方快速實現(xiàn)圖片瀏覽功能的需求，搜狗資源平臺正式推出圖片查看器組件，該組件具備輕量化、易接入的特性，旨在幫助合作方以低成本方式優(yōu)化圖片交互體驗。同時，平臺期望各合作方嚴(yán)格遵循搜索理想體驗標(biāo)準(zhǔn)，共同構(gòu)建信息豐富、操作流暢、用戶友好的移動搜索生態(tài)體系。

組件能力

通過JS API注入必要參數(shù)后，H5頁面內(nèi)的圖片可在QQ瀏覽器移動端實現(xiàn)多重交互功能：用戶點擊圖片即可調(diào)起高清大圖預(yù)覽模式，支持在單張大圖與多圖輪播間自由切換，并可通過單指縮放、雙指縮放及滑動回收等精細(xì)化手勢操作，靈活控制圖片的展示細(xì)節(jié)，確保用戶獲得沉浸式的視覺瀏覽體驗。

接入方案

##### 調(diào)用方法

核心調(diào)用接口為 `browser.app.openPhotoBrowser(urls, index, [style])`，通過傳入特定參數(shù)實現(xiàn)圖片查看器的功能調(diào)用。

##### 調(diào)用時機

該接口應(yīng)在用戶主動點擊頁面內(nèi)圖片元素時觸發(fā)，確保交互響應(yīng)的即時性與精準(zhǔn)性，符合用戶對圖片查看操作的習(xí)慣性預(yù)期。

##### 參數(shù)說明

- urls（Array）：需預(yù)覽的圖片資源鏈接數(shù)組，支持傳入多張圖片的URL，用于構(gòu)建圖片輪播列表。

- index（Number）：預(yù)覽起始索引值，從0開始對應(yīng)urls數(shù)組中的首個圖片元素，用于指定用戶首次查看的圖片位置。

- style（Number）：圖片查看器樣式參數(shù)，可通過不同數(shù)值調(diào)用預(yù)設(shè)的視覺主題，適配合作頁面的整體設(shè)計風(fēng)格。

##### 代碼示例

在HTML頁面中引入以下腳本以加載API接口：

```html

```

獲取需預(yù)覽的圖片地址并構(gòu)造數(shù)組（以下為React示例，合作方可根據(jù)實際框架調(diào)整）：

```javascript

var sectionInfo = this.props.sectionInfo;

var imgUrls = sectionInfo.vImgUrls;

var prevImgUrls = [];

_.each(imgUrls, function (item) {

prevImgUrls.push(item.sImgUrl);

});

```

調(diào)用接口（建議在setTimeout中執(zhí)行以確保DOM渲染完成，并對API存在性進行校驗）：

```javascript

setTimeout(function() {

if (window.browser && window.browser.app && window.browser.app.openPhotoBrowser) {

browser.app.openPhotoBrowser(prevImgUrls, 0, 0);

}

}, 0);

```

##### 注意事項

該組件能力僅在QQ瀏覽器移動端環(huán)境中生效，可通過檢測UserAgent中是否包含'MQQBrowser'標(biāo)識來判斷當(dāng)前環(huán)境是否支持。合作方需自行實現(xiàn)圖片元素的點擊事件綁定（如通過事件代理或直接綁定），若在接入過程中遇到技術(shù)問題，可向技術(shù)團隊反饋郵箱 zhangzhang@sogou-inc.com 提交需求與建議。

來源：搜狗資源平臺