搜狗資源平臺-圖片查看器調(diào)用幫助
經(jīng)過深度的行業(yè)調(diào)研與用戶訪談發(fā)現(xiàn)，圖片支持手勢縮放等操作已在用戶側(cè)形成了基本認(rèn)知，因此圖片查看功能被確定為搜索移動理想體驗中不可或缺的組成部分。本著為用戶提供沉浸式瀏覽體驗的理念，平臺現(xiàn)推出圖片查看器組件供廣大合作方實現(xiàn)低成本能力接入，同時也期望合作方依照搜索理想體驗標(biāo)準(zhǔn)進(jìn)行整改，攜手共建信息豐富、體驗順暢的用戶友好型搜索引擎。
組件能力
通過js api注入信息后，H5頁面內(nèi)的圖片可在QQ瀏覽器移動端實現(xiàn)點擊調(diào)起大圖、預(yù)覽全部圖片、以及根據(jù)手勢對圖片進(jìn)行縮放與回收等操作。
接入方案
調(diào)用方法
browser.app.openPhotoBrowser(urls, index, [style])
調(diào)用時機(jī)
用戶點擊圖片時調(diào)用。
參數(shù)說明
url
Array
需要預(yù)覽的圖片url集
index
Number
預(yù)覽起始索引的圖片位置
style
Number
圖片查看器樣式
代碼示例
在html頁面內(nèi)引入以下script腳本
<script src="https://jsapi.qq.com/get?api=app.openPhotoBrowser" type="text/javascript"></script>
//獲取所有需調(diào)起圖片查看器的圖片地址并放入prevImgUrls中
var sectionInfo = this.props.sectionInfo;
var imgUrls = sectionInfo.vImgUrls;
var prevImgUrls = [];
_.each(imgUrls, function (item) {
prevImgUrls.push(item.sImgUrl);
});
//下述代碼示例默認(rèn)調(diào)起第一張圖片，合作方可根據(jù)需求自行修改index字段
setTimeout(function() {
window.browser &&
window.browser.app &&
window.browser.app.openPhotoBrowser &&
browser.app.openPhotoBrowser(prevImgUrls, 0, 0);
}, 0);
注意：該能力僅在QQ瀏覽器內(nèi)，判斷方式是UserAgent中包含MQQBrowser
以上即為圖片查看器的調(diào)用說明，未包含圖片事件點擊綁定，各位合作方可以通過事件代理或者直接在圖片上綁定事件來實現(xiàn)，如對該組件接入有其他問題，可以向[email protected]提交反饋郵件。
來源：搜狗資源平臺
