在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
wxml: <view id="panel" class="flex-row"> <view class="flex-cell" wx:for="{{add_expend}}" wx:for-item="expend" wx:key="add_expend" data-message="{{expend.message}}" bindtap="add_expend_fun"> <text class="flex-text">{{expend.message}}</text> </view> </view>
wxss: #panel{
margin: 5px 3vh 15px 3vh;
}
#panel .flex-cell{
display: flex;
height: 14vh;
width: 14vh;
border: 1rpx solid #cccccc;
flex-wrap:wrap;
justify-content: center;
align-items: center;
}
.flex-row{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap:wrap;
}
.flex-column{
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
flex-wrap:wrap;
}
.flex-text{
display: flex;
}
js: data: {
add_expend:[{
message:'美食',
},{
message:'娱乐',
},{
message:'理财',
},{
message:'油费',
},{
message:'保险',
},{
message:'炒股',
},{
message:'话费',
},{
message:'旅游',
},{
message:'购物',
},{
message:'其它支出',
}]
}
参考了flex教程XD for循环里记得加双花括号,wx:for-item不注明的话默认是item
|
请发表评论