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

效果如下：

源码：
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  
       }) 
  }
})

最后

以上就是大气小蝴蝶为你收集整理的小程序实现相册选择多张图片换行显示的全部内容，希望文章能够帮你解决小程序实现相册选择多张图片换行显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。