初学微信小程序——实现图片并排与九宫格布局

从官方文档我们可以找到横向布局的代码示例:

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

因此,我参照官方文档,写了个九宫格布局的代码:

addcats.wxml

<!--pages/admin/addcats/addcats.wxml-->
<view>
  <button bindtap="addCatImg">上传猫咪图片</button>
  <!-- 九宫格布局预览图片 -->
  <view wx:for="{{[0,1,2]}}" wx:for-item="i">
    <view style="flex-direction:row;display:flex;"><!-- 横排布局 -->
      <view wx:for="{{imgTempPathArray}}" wx:for-item="tempPath" wx:for-index="index"><!-- 遍历数组 -->
        <view wx:if="{{index>=i*3 && index<3*(i+1)}}" class="flex-item"><!-- 分段显示 -->
          <image src="{{tempPath}}" style="height:240rpx;width:240rpx;"></image>
        </view>
      </view>
    </view>
  </view>
</view>

addcats.js

// pages/admin/addcats/addcats.js

Page({ /** * 页面的初始数据 */ data: { name:"", imgTempPathArray:[], }, addCatImg(){ let that = this wx.chooseImage({ count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths // 小程序临时文件路径数组 var imgArr = [] imgArr = imgArr.concat(tempFilePaths) that.setData({ imgTempPathArray:imgArr, }) }, fail(res){ console.log("上传图片失败",res) } }) }, })

效果如下:

 

posted @ 2020-07-03 14:40  TCSN  阅读(178)  评论(0编辑  收藏