小程序?qū)崿F(xiàn)圖片預(yù)覽的方式
小程序?qū)崿F(xiàn)圖片預(yù)覽,是圖片基本的效果,那么如何實(shí)現(xiàn)圖片預(yù)覽呢?
我們所有的圖片都以固定尺寸顯示,并將image的mode設(shè)置為了aspectFill。將為圖片添加預(yù)覽功能。無(wú)須自己編寫圖片預(yù)覽插件,小程序已經(jīng)為我們提供好了圖片預(yù)覽的接口:wx.previewlmage(object)。
它有以下兩個(gè)重要屬性:
1、current當(dāng)前顯示圖片的鏈接,不填則默認(rèn)為urls的第一張。
2、urls需要預(yù)覽的圖片鏈接列表,類型為數(shù)組。這里要注意的是,urls是一個(gè)數(shù)組,可以支持多張圖片。它實(shí)際上類似于一個(gè)相冊(cè),可以左右滑動(dòng)查看多張圖片。修改post-comment.wxml中class=“comment-img”這個(gè)view組件內(nèi)容。
以上代碼的屬性:
1、在每一張image圖片上注冊(cè)一個(gè)事件catchtap=“previewlmg”,用來(lái)相應(yīng)點(diǎn)擊圖片操作。
2、在block標(biāo)簽上新增wx:for-index=“imgIdx”,用以定義圖片序號(hào)。
3、在每一張image圖片上綁定了一個(gè)自定義屬性:data-comment-idex="{}",用來(lái)綁定當(dāng)前評(píng)論在評(píng)論數(shù)組中的序號(hào),并在previewlmg方法中獲取這個(gè)序號(hào)。idx已在標(biāo)簽中定義。
4、在每一張image圖片上綁定一個(gè)自定義屬性data-img-idx=“{}”,用來(lái)綁定圖片在圖片數(shù)組中的序號(hào),并在previewlmg方法中獲取這個(gè)序號(hào)。接著在post-comment.js中實(shí)現(xiàn)previewlmg這個(gè)方法。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。
更多小程序開(kāi)發(fā)案例,盡在:http://m.descansotropical.com/xiaocx/kaifa.html
小程序顯示圖片相關(guān)文章:
小程序加載圖片如何實(shí)現(xiàn)
小程序開(kāi)發(fā)上傳圖片如何實(shí)現(xiàn)
小程序上傳圖片組件及上傳多張圖片