<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; }