小程序实现相册选择多张图片换行显示

效果如下：
在这里插入图片描述
源码：
wxml:

   <view class='box' hover-class="box-hover" hover-stay-time="500" bindtap='changeImg'>
        <image class='img-box' src='/images/{{image}}'></image>
        <text class='text-box'>公司外景</text>
      </view>

      <view class='line'></view>

      <view hidden='{{status}}'>
        <view class='addPics'>
          <image class='addpic' src='/images/gridview_addpic.png' bindtap='goTakePic'></image>
        </view>
        <view class="block">
          <block wx:for="{{src}}">
          <!-- <block wx:if="{{index % 5 == 0}}">
           <view></view>
          </block> -->
            <navigator url=''>
              <image class='addpic' src='{{item}}' data-index="{{index}}" bindtap="previewImage"></image>
            </navigator>
          </block>
        </view>
      </view>

wxss:

.box{
  width: 100%;
  height: 40rpx;
  display: flex;
  text-align:center;
  align-items: center;
}

.boxbox-hover{
  width: 100%;
  height: 40rpx;
  display: flex;
  text-align:center;
  align-items: center;
  opacity: 0.9; /* 透明度变化 */
  background-color: #ffc343;
}

.img-box{
  width: 40rpx;
  height: 40rpx;
  margin-left: 10px;
}

.text-box{
  font-size: 20px;
  margin-left: 10px;
  display: flex;
   flex-direction: column;
   align-items: center;
  margin-bottom: 2px;
}

.line{
   background-color: #f4f4f4;
    width: 100%;
    height: 5rpx
}
.line2{
 width: 5rpx;
height: 140rpx ;
background-color: #ffffff;
}
.addpic{
  width: 100rpx;
  height: 100rpx;
  margin-left: 10px;
}

.addPics{
  width: 100%;
  display: flex;
  flex-direction: row;
  white-space: pre-wrap;
}

.block{
  width: 100%;
   /*下面三行代码实现了图片换行*/
  display: flex;
 flex-flow: row wrap;  
align-content: space-around;
}

js:

// pages/test/test.js
var image_status = true; //图片状态
var src_array = []; //上传图片路径数组
Page({

  /**
   * 页面的初始数据
   */
  data: {
    status: true,
    image: "ic_close.png",
    src: {}
  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  }, goTakePic: function () { //启动拍照功能
    console.log("拍照")
    var that = this;
    wx.chooseImage({
      count: 9, // 最多可以选择的图片张数，默认9
      sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
      sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
      success: function (res) {
        // success
        console.log(res)
        console.log(res.tempFilePaths)
        src_array = src_array.concat(res.tempFilePaths)
        that.setData({
          src: src_array
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })

  }, changeImg: function () { //点击切换小图片
    if (image_status == false) {
      this.setData({
        image: "ic_close.png",
        status: true
      })
      image_status = true;

    } else {
      this.setData({
        image: "ic_open.png",
        status: false
      })
      image_status = false;
    }

  },
  previewImage:(e)=>{ //点击小图预览大图
    var that = this,  //获取当前图片的下表    
    index = e.currentTarget.dataset.index;   
    //数据源    
    //  pictures = this.data.src_array; 
     wx.previewImage({  
       //当前显示下表   
       current: src_array[index],   
       //数据源   
       urls: src_array  
       }) 
  }
})

小程序实现相册选择多张图片换行显示

猜你喜欢