小程序添加及删除图片（朋友圈）

最新推荐文章于 2024-01-17 16:01:21 发布

A_little.

最新推荐文章于 2024-01-17 16:01:21 发布

阅读量677

点赞数 9

文章标签：小程序 html5 javascript

本文链接：https://blog.csdn.net/m0_71680306/article/details/135204240

版权

效果图------点击图片可查看图片，点击右上角×可删除图片，点击+可添加图片

wxml完整代码

<view class="add-box">
  <text class="add-word">发表</text>
  <textarea placeholder="这一刻的想法..." cols="30" rows="10" maxlength="-1"></textarea>

  <block>
    <view class="img-wrap">
      <view class="one-image" wx:for="{{chosenImagePaths}}" wx:key="index">
        <image bindtap="skanImage" class="img-choose" src="{{item}}" data-index="{{index}}" ></image>
        <image src="/imges/删除.png" class="img-delete" data-src="{{item}}" bindtap="deleteimage"></image>
      </view>
      <view class="one-image">
        <image class="img-chooses" src="/imges/添加.png" bindtap="addimage" />
      </view>
    </view>
  </block>
</view>

js完整代码

// pages/publish/publish.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    chosenImagePaths:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  addimage() {
    wx.chooseImage({
      count: 9, // 选择图片的最大数量，这里假设最多可选择 9 张图片
      sizeType: ["original"],
      sourceType:['album', 'camera'],
      success: (res) => {
        const temp = res.tempFilePaths // 获取选择的图片临时路径数组
        console.log(temp)
        
        // 将选择的图片路径添加到数组中
        this.setData({
          chosenImagePaths: this.data.chosenImagePaths.concat(temp)
        })
      }
    })
  },
  skanImage(e){
    let imgList = this.data.chosenImagePaths  // 修正这里的变量名，确保与 data 中的属性一致
    let index = e.currentTarget.dataset.index  // 正确获取 index
    wx.previewImage({
      urls: imgList,
      current: imgList[index]
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },
  deleteimage(e){
    let that = this
    let dele = e.currentTarget.dataset.src
    let imgList = that.data.chosenImagePaths.slice();
    wx.showModal({
      title: '删除图片',
      content: '确认删除这张图片吗',
      success(res){
        if(res.confirm){
          for (var i=0; i<imgList.length; i++){
            if(imgList[i] == dele){
              imgList.splice(i, 1)
              that.setData({
                chosenImagePaths:imgList
              })
            }
          }
        }
      }
    })
  },
 

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})