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