功能为基于数组的数目去渲染对应的行数(3条数据对应3行),其中界面布局使用Uview UI
具体代码如下:
<template>
<view>
<view class="contian">
<view v-for="item in listArr">
<u-row :justify="justify" class="row" :id="item.id" @click="rowClick(item.id)">
<u-col :span="span" :offset="offset" class="column">
<view class="txt">{{item.labelLfetTxt}}</view>
</u-col>
<u-col :span="span" :offset="offset" class="column">
<view class="txt">{{item.labelLeftValue}}</view>
</u-col>
<u-col :span="span" :offset="offset" class="column">
<view class="txt">{{item.labelRightTxt}} </view>
</u-col>
<u-col :span="span" :offset="offset" class="column">
<view class="txt">{{item.labelRightValue}}</view>
</u-col>
</u-row>
</view>
</view>
</view>
</template>
<script>
export default {
name: "messageCard",
props: {
listData: {
type: Array,
default: () => [{
id: '1',
labelLfetTxt: '姓名',
labelLeftValue: 'wmj',
labelRightTxt: '姓名1',
labelRightValue: 'wmj1'
}]
},
span: {
type: Number,
default: 3
},
offset: {
type: Number,
default: 0
},
justify: {
type: String,
default: 'between'
}
},
data() {
return {
listArr: []
};
},
mounted() {
var _this = this;
_this.listArr = _this.listData
},
methods: {
rowClick(e) {
this.$emit('clickRow', e);
}
}
}
</script>
<style>
.contian {
margin: 10rpx;
border-radius: 8rpx;
border: 1rpx solid #b3b3b3;
}
.txt {
margin-left: 10rpx;
/* display: flex;
flex-direction: row; */
/* justify-content: center; */
}
.row {
height: auto;
margin: 20rpx 0rpx;
}
.column {
width: 200rpx;
word-break: break-all
}
</style>
其中需要注意的点是,在mounted函数中需要指定一下属性数组,这样外部调用时可以传值进来!