微信小程序卡片列表显示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
}