小程序?qū)崿F(xiàn)圖片預(yù)覽，是圖片基本的效果，那么如何實現(xiàn)圖片預(yù)覽呢?

　　我們所有的圖片都以固定尺寸顯示，并將image的mode設(shè)置為了aspectFill。將為圖片添加預(yù)覽功能。無須自己編寫圖片預(yù)覽插件，小程序已經(jīng)為我們提供好了圖片預(yù)覽的接口：wx.previewlmage(object)。

　　它有以下兩個重要屬性：

　　1、current當(dāng)前顯示圖片的鏈接，不填則默認(rèn)為urls的第一張。

　　2、urls需要預(yù)覽的圖片鏈接列表，類型為數(shù)組。這里要注意的是，urls是一個數(shù)組，可以支持多張圖片。它實際上類似于一個相冊，可以左右滑動查看多張圖片。修改post-comment.wxml中class=“comment-img”這個view組件內(nèi)容。

　　以上代碼的屬性：

　　1、在每一張image圖片上注冊一個事件catchtap=“previewlmg”，用來相應(yīng)點擊圖片操作。

　　2、在block標(biāo)簽上新增wx：for-index=“imgIdx”，用以定義圖片序號。

　　3、在每一張image圖片上綁定了一個自定義屬性：data-comment-idex="{}"，用來綁定當(dāng)前評論在評論數(shù)組中的序號，并在previewlmg方法中獲取這個序號。idx已在標(biāo)簽中定義。

　　4、在每一張image圖片上綁定一個自定義屬性data-img-idx=“{}”，用來綁定圖片在圖片數(shù)組中的序號，并在previewlmg方法中獲取這個序號。接著在post-comment.js中實現(xiàn)previewlmg這個方法。

小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序開發(fā)案例，盡在：http://www.fluoresville.cn/miniprogramschool/kaifa.html

小程序顯示圖片相關(guān)文章：

小程序加載圖片如何實現(xiàn)

小程序開發(fā)上傳圖片如何實現(xiàn)

小程序上傳圖片組件及上傳多張圖片