列表显示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
}