WeChatアプレット画像プレビュー機能の実装コード

画像プレビューは非常に一般的な機能です。この記事では主に画像プレビュー機能を実装する方法を詳しく紹介します。興味のある方は参考にしてください。

レンダリング

原則

• ローカル画像を選択するにはwx.chooseImageを使用します。画像をプレビューするにはwx.previewImageを使用します。

• 
  WXML

  <view>
   <button bindtap="previewImage" type="primary">图片上传预览</button>
   <view class="tui-content"> 
    <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" src="{{item}}" src="{{item}}"></image>
   </view>
  </view>

WXSS

page{background-color: #efeff4;}
.tui-preview-img{
 width: 200rpx;
 height: 120rpx;
}

JS

Page({
 data: {
  previewImageArr:[]
 },
 previewImage(e){
  var self = this;
  wx.chooseImage({
   count:8,
   success(res) {
    var tempFilePaths = res.tempFilePaths;
    self.setData({ previewImageArr: tempFilePaths});
   }
  })
 },
 changePreview(e){
  var self = this;
  wx.previewImage({
   current: e.currentTarget.dataset.src,
   urls: self.data.previewImageArr
  })
 }
})

Note

wx.previewImageパラメータの現在のパラメータとURLはhttpリンクである必要があります。 関連する推奨事項:

画像プレビューを実装し、サムネイルをアップロードおよび生成するための AJAX メソッド

画像プレビューを実装し、アップロードするための Nodejs のサンプル コード

jQuery が UploadView を使用して画像プレビューとアップロードを実装する方法の例関数

以上がWeChatアプレット画像プレビュー機能の実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。