この記事の内容は、ミニプログラムでプレビュー画像を選択し、長押しして画像を削除できるようにするコードに関するものです。必要な友人が参考になれば幸いです。 。
私は現在、小さなプログラムプロジェクトに取り組んでおり、それをしながら学習しています。ここに記録し、友人にいくつかのヘルプを提供します。必要。 WeChat モーメントに写真を投稿するのと同様に、指定した写真を長押しして削除します
写真が 9 枚未満の場合は、引き続き
写真プレビュー効果
を追加できます。実装アイデア:
ページを調整し、表示効果を実現するには
wx.chooseImageを使用して写真を撮り、写真を選択します
wx.previewImageを使用して画像プレビューを実現します
画像削除機能をカスタマイズするにはbindlongpressを使用してください
言葉 早速、コードを示します:
wxmlコード
<view class="weui-cells"> <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view class="weui-uploader__title">图片上传</view> <view class="weui-uploader__info">{{files.length}} / 9</view> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files" id="uploaderFiles"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-uploader__file" bindtap="previewImage" bindlongpress="deleteImage" id="{{item}}" data-index="{{index}}"> <image class="weui-uploader__img" src="{{item}}" mode="aspectFill"/> </view> </block> </view> <view wx:if="{{files.length < 9}}" class="weui-uploader__input-box" > <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view> </view></view>
jsコード
Page({ data: { files: [] }, chooseImage: function(e) { var that = this; var images = that.data.files; wx.chooseImage({ count: 9 - images.length, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function(res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 that.setData({ files: that.data.files.concat(res.tempFilePaths) }); } }) }, previewImage: function(e) { wx.previewImage({ current: e.currentTarget.id, urls: this.data.files }) }, deleteImage: function(e) { var that = this; var images = that.data.files; var index = e.currentTarget.dataset.index; //获取当前长按图片下标 wx.showModal({ title: '系统提醒', content: '确定要删除此图片吗?', success: function(res) { if (res.confirm) { images.splice(index, 1); } else if (res.cancel) { return false; } that.setData({ files: images }); } }) } })
関連する推奨事項:
showmodalポップアップをカスタマイズする方法WeChat アプレットのボックス (コード付き)
WeChat アプレットでリストのレンダリングを実装する方法 マルチレベルのネストされたループ
アプレットでリッチテキストを使用して ul 関数 (コード) を実装します
以上がミニプログラムでは、プレビュー画像を選択し、長押しすることで画像を同時に削除できます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。