小程序实现卡片式列表

最新推荐文章于 2024-08-01 19:08:09 发布

AuGnIk

最新推荐文章于 2024-08-01 19:08:09 发布

阅读量7k

点赞数 4

分类专栏：个人笔记小程序文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_43835943/article/details/106581646

版权

本文介绍了如何在小程序中实现卡片式列表，包括图片的垂直居中、文本的省略展示以及底部内容的flex布局。通过设置CSS样式，实现了卡片的美观布局，点击卡片可跳转至详情页。

摘要由CSDN通过智能技术生成

最近写的小程序频繁地用到卡片式列表，例如文章列表、任务列表等，卡片中包含了图片、标题、内容描述、时间等内容，通常点击卡片跳转到对应详情页面。一般是用wx:for来进行循环，结构比较清晰，但是样式写得我有点头疼。本来是有个vant框架的vant-card可以用的，但是vant-card组件不是很灵活，自己也暂时研究不明白，就只能先自己手写了。
效果如图：
在这里插入图片描述
上代码：

<!-- html -->
<view class="cards" wx:for="{
    {items}}" wx:for-item="item" wx:key="item">
	<navigator class="nav" url="">
		<!-- 左侧图片 -->
		<view class="card card-url">
			<image src="{
    {item.img_src}}" mode="widthFix"></image>
		</view>
		<!-- 右侧文本区域 -->
		<view class=" card card-text">
			<view class="card-title">{
  {item.title}}</view>
			<view class="card-desc