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

組件能力

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

接入方案

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

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

##### 調(diào)用時(shí)機(jī)

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

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

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

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

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

##### 代碼示例

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

```html

```

獲取需預(yù)覽的圖片地址并構(gòu)造數(shù)組（以下為React示例，合作方可根據(jù)實(shí)際框架調(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渲染完成，并對(duì)API存在性進(jìn)行校驗(yàn)）：

```javascript

setTimeout(function() {

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

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

}

}, 0);

```

##### 注意事項(xiàng)

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

來(lái)源：搜狗資源平臺(tái)