微信小程序——卡片列表显示listview(带阴影)

列表显示listview

简介

有时候我们需要显示某个list里面的数据展示给客户,里面包含图片,标题和内容,这时候,我们就需要用到如下的展示效果了:
在这里插入图片描述

这里只做功能的展示,想要更好看的需要修改布局和图片文字效果。

代码

.
.
.
.
.

wxml

<block wx:for="{{list}}" wx:key="index">

  <!-- 包裹图片+两行文字 id="{{index}}"是给按下了那个item记录-->

  <view class="view_tupian_wenzi" bindtap="click" id="{{index}}">
  
    <image class="image_1" src="../images/main_geren.png" />
    
    <!-- 包裹两行文字 -->
    <view class="view_wenzi2">
    
      <text>{{item.name}}</text>
      
      <text class="text_small">{{item.content}}</text>
      
    </view>
    
  </view>
  
</block>

.
.
.
.
js

Page({
  data: {
    list: [{
      id: 1,
      name: '芒果',
      content: "我是张三,见到大家很高兴。。。"
    }, {
      id: 2,
      name: '香蕉',
      content: "我是李四,可以带大将去玩。。。。"

    },{
        id: 3,
        name: '苹果',
        content: "我是王五,我编码贼好。。。。"

      }]
  },

  click: function (e) { 
    console.log("按了:", e.currentTarget.id)
  }

})

.
阴影说明:
.

.
.
.
.

wxss

/* 包裹图片和两行文字 */

.view_tupian_wenzi {
  height: 120rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  
  /* 圆角 */
  border-radius: 20rpx;

  /* 边 */
  border: 3rpx solid #E0E3DA;
  box-shadow:5rpx 5rpx 5rpx 5rpx #E0E3DA;

  background-color: #ffffff;
  margin: 30rpx;

  /* padding使得文字和图片不至于贴着边框 */
  padding: 30rpx;

}

/* 图片 */

.image_1 {
  width: 100rpx;
  height: 100rpx;
}

/* 包裹两行文字 */

.view_wenzi2 {
  width: 100%;
  margin-left: 25rpx;
  display: flex;
  flex-direction: column;
}

/* 小字 */

.text_small {
  font-size: 30rpx;
  word-break: break-all;
  color: #7a7878;
  margin-top: 10rpx
}
  • 5
    点赞
  • 62
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

wy313622821

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值