效果图:
1.template:布局
<template>
<view class=”content”>
<view class=”cp-xiangmu” v-for=”item in imgs”>
<image :src=”item.imgurl” class=’cp_tupian’ mode=’widthFix’></image>
<text class=’cp-biaoti’>{{item.title}}</text>
</view>
</view>
</template>
2.script标签中添加测试数据
3.最重要的是style样式
<style>
.cp_tupian {
width: 100%;
}
.cp-biaoti {
font-size: 14px;
color: gray;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cp-xiangmu {
width: 50%;
display: flex;
padding: 3px;
box-sizing: border-box;
flex-direction: column;
}
.content {
display: flex;
flex-wrap: wrap;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/119146.html