index.js
const app = getApp()
Page({
data: {
newPhotos: [{
id:1,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=09c7c94ee24a35872ecb0992dcdd303f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
width: 150,
height: 400
},
{
id:2,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=372d3ca86674b2bf889ef654d2891779&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg',
width: 150,
height: 300
},
{id:3,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627415&di=11a3400c4db82dbae32c4a518c167703&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
width: 150,
height: 350
},{
id:4,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=09c7c94ee24a35872ecb0992dcdd303f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
width: 150,
height: 320
},
{id:5,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=372d3ca86674b2bf889ef654d2891779&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg',
width: 150,
height: 250
},
{
id:6,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627415&di=11a3400c4db82dbae32c4a518c167703&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
width: 150,
height: 260
},
{id:7,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=09c7c94ee24a35872ecb0992dcdd303f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
width: 150,
height: 400
},
{id:8,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=372d3ca86674b2bf889ef654d2891779&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg',
width: 150,
height: 300
},
{id:9,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627415&di=11a3400c4db82dbae32c4a518c167703&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
width: 150,
height: 350
},{
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=09c7c94ee24a35872ecb0992dcdd303f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
width: 150,
height: 320
},
{
id:10,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627416&di=372d3ca86674b2bf889ef654d2891779&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg',
width: 150,
height: 250
},
{
id:11,
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592198627415&di=11a3400c4db82dbae32c4a518c167703&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
width: 150,
height: 260
}
],
leftList: [],
rightList: []
},
onLoad: function () {
this.flexList()
},
flexList(){
let {
leftList,
rightList,
newPhotos
} = this.data
newPhotos.map((photo,num) => {
num%2==0?leftList.push(photo):rightList.push(photo)
})
this.setData({
leftList, rightList
})
}
})
index.wxml
<view class="intro">
<!-- list -->
<view class='list'>
<!-- left -->
<view class='left-list'>
<image wx:for="{{leftList}}" wx:key="{{item.id}}" src="{{item.img}}" mode='widthFix'></image>
</view>
<!-- right -->
<view class='right-list'>
<image wx:for="{{rightList}}" wx:key="{{item.id}}" src="{{item.img}}" mode='widthFix'></image>
</view>
</view>
</view>
index.css
.intro {
text-align: center;
}
.list {
display: flex;
flex: 1;
position: relative;
flex-direction: row;
justify-content: space-between;
padding-left: 12rpx;
padding-right: 12rpx;
padding-top: 8rpx;
}
.list image{
width: 100%;
margin-bottom: 10rpx;
}
.left-list {
display: flex;
position: relative;
flex-direction: column;
width: 359rpx;
}
.right-list {
display: flex;
position: relative;
flex-direction: column;
width: 359rpx;
}