使用uni-app封装一个好看的列表选项
<template>
<view>
<view class="product" v-for="(item,index) in list">
<view class="bottom">
<view class="title">{{item.name}}</view>
<view class="content" >
<block v-for="(item2,index2) in ">
<input v-if="item2=='input'" type="text"
value="" placeholder-style="font-size:10px;color:#999" :placeholder="" />
<text v-if="item2=='txt'">{{item.content}}</text> <text v-if="item2=='ico'" class="iconfont"
:class=""></text>
</block>
</view>
</view>
<view class="hr"></view>
</view>
</view>
</template>
<script>
export default {
name:"listselect",
props:{
list:{
type:Array,
default:[]
}
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.product {
.bottom {
display: flex;
justify-content: space-between;
padding: 0 5%;
height: 45px;
line-height: 45px;
font-size: 14px;
color: #333333;
align-items: center;
.title {
font-weight: bold;
}
.content {
display: flex;
font-size: 12px;
align-items: center;
input {
text-align: right;
font-size: 12px;
color: #333;
font-family: '微软雅黑';
}
text {
margin-left: 10px;
}
}
}
.hr {
width: 90%;
height: 1px;
background-color: $uni-border-color_my;
margin: auto;
}
}
</style>