<scroll-view style=“height:100vh;” scroll-y=“true” scroll-into-view="{{toView}}" scroll-with-animation=“true” class=“previewImageContainer”>

<block wx:for="{{pages}}" wx:for-index=“pn” wx:for-item=“page”>

<block wx:if="{{page.status != ‘loaded’}}">

<view class=“empty-page” id=“page{{pn}}”  capture-bind:touchstart=“bindTouchPage”>

<image src="…/…/images/yanjiu_blue.svg" />

</view>

</block>

<block wx:else>

<block wx:if="{{page.imageInfo.pageKeyPos}}">

<view id=“page{{pn}}” capture-bind:touchstart=“bindTouchPage” style=“background:url({{page.imageInfo.url}})no-repeat;width:750rpx;height:{{page.imageInfo.pageKeyPos.pageSize.h*(750/page.imageInfo.pageKeyPos.pageSize.w)}}rpx;background-size:100% 100%;margin-bottom:10rpx;”>

<block wx:for="{{keywords}}" wx:for-index=“ki” wx:for-item=“keyword”>

<canvas canvas-id=‘ki{{ki}}pn{{pn}}’ style=“position:absolute;width:100%; height:100%;margin-left:{{ keywordHighlightMap[ki] == true ? 0 : ‘5000rpx’}};”></canvas>

</block>

</view>

</block>

<block wx:else>

<image id=“page{{pn}}” mode=“widthFix” src="{{page.imageInfo.url}}" />

</block>

</block>

</block>

</scroll-view>

bindTouchPage: function(event){

console.log(JSON.stringify(event));

let current = parseInt(event.currentTarget.id.substr(4));

console.log(current);

let index = -1;

let end = current + 10;

if(end > this.data.numPage){

end = this.data.numPage;

}

let pages = this.data.pages;

for (let pn = current; pn < end; pn++){

if (pages[pn].status == ‘unload’){

index = pn;

break;

}

}

if(index == -1){

return;

}

this.loadHighlightedView(index, current + 10 - index, true);

},

.previewImageContainer{

width: 750rpx;

min-height: 100vh;

padding-bottom: 15vh;

background-color: #ffffff;

}

.previewImageContainer image{

width: 100%;

height: auto;

}

.empty-page{

width: 750rpx;

height: 750rpx;

margin-bottom: 10rpx;

}

.empty-page image{

width: 300rpx;

height: 300rpx;

margin: 225rpx;

}