对象里数组的渲染

<view class='bo_bo'>
  <block wx:for="{{list}}">
    <view class='text'>{{item.text}}</view>
      <view  class='img_bo'>
        <image wx:for='{{item.img_list}}'  mode="widthFix"
 src='{{item}}' class='img'></image>
      </view>
  </block>

</view>
.bo_bo{
  margin: 20rpx;
  /* border: 1rpx solid #ccc */
}

.img_bo{
  display: flex;
  /* 横排 */
  flex-direction: row;
  /* 超出换行 */
  flex-wrap: wrap;
  margin-bottom: 30rpx
}
.img{
  width:48%;
  margin: 1%
}
.text{
  /* 行高 */
  line-height: 80rpx;
  /* 字体大小 */
  font-size: 32rpx;
  /* 超出影藏 */
 overflow: hidden;
 /* 加三个点 */
white-space: nowrap;
/* 强制文本不换行 */
text-overflow: ellipsis; 
}

Page({
  data: {
    //name: wx.getStorageSync('Aa'),
    text: "",
    postname: "",
    id1: "",
    list:[{
      text:"1.标题啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
      img_list: ['../../img/asd.jpg', '../../img/asd.jpg', '../../img/asd.jpg', '../../img/asd.jpg']
      
    }, {
        text: "2.标题",
        img_list: ['../../img/asd.jpg', '../../img/asd.jpg']
      }, {
        text: "3.标题啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
        img_list: ['../../img/asd.jpg', '../../img/asd.jpg', '../../img/asd.jpg', '../../img/asd.jpg']

      },]
  },

})

猜你喜欢

转载自blog.csdn.net/qq_41241504/article/details/88997423