WeChatミニプログラムに画像プレビュー機能を実装する方法

この記事では、主に画像プレビュー機能を実装するための WeChat アプレットを詳しく紹介します。興味のある方は参考にしてください。

この記事では、画像プレビューを実装するための具体的なコードを紹介します。具体的な内容は以下の通りです

Rendering

Principle

• ローカル画像を選択するには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
  })
 }
})

注

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

上記は私があなたのためにまとめたものです。

関連記事:

Vue.js でのコンポーネントとその機能の使い方を詳しく説明しますか?

AngularJS1.xアプリケーションをReactに移行する(詳細なチュートリアル)

vue 2.0でショッピングカートボール放物線を実装する方法

以上がWeChatミニプログラムに画像プレビュー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。