展示样式:
样式说明:父组件限制宽度,超出宽度会显示下拉箭头,如果没有超出则不显示下拉箭头。
子组件代码:
<template>
<view :class="[isAuto ? '' : 'No-auto', 'discount-list']">
<view class="discount-item" v-for="(item,index) in list" :key="index">{{item}}</view>
<view v-show="isShow">
<image class="discount__icon" v-show="!selected" mode="aspectFit" src="../../static/images/icon/icon_tri_down.png" @tap.native.stop="onTap"></image>
<image class="discount__icon" v-show="selected" mode="aspectFit" src="../../static/images/icon/icon_tri_up.png" @tap.native.stop="onTap"></image>
</view>
</view>
</template>
<script>
export default {
name: 'discount-list',
data(){
return {
selected:false,
isShow:false,
isAuto:true
}
},
props: {
icon: {
type: String,
default: ''
},
extend: {
type: Boolean,
default:false
},
list:{
type:Array
}
},
computed:{
},
mounted(){
let view = uni.createSelectorQuery().in(this).select(".discount-list");
view.boundingClientRect(data => {
if(data.height>25){
this.isShow=true
this.isAuto=false
}
}).exec();
},
methods:{
onTap(){
this.selected=!this.selected
this.isAuto=!this.isAuto
}
}
}
</script>
<style lang="scss">
.discount-list{
overflow:hidden;
.discount-item{
float: left;
margin-right: 15upx;
margin-bottom: 8upx;
height:34upx;
background:rgba(255,255,255,1);
border-radius:4px;
border:1px solid rgba(255,48,30,1);
color: #FF301E;
padding:3upx 8upx;
font-size: 20upx;
}
.discount__icon{
width: 32upx;
height:32upx;
position: absolute;
right: -10upx;
top: 5upx;
}
}
.No-auto{
height: 50upx;
}
</style>
父组件代码:
<discount-list :list="discountList"></discount-list>
注:因为开发用的是uni-app框架,所以
计算组件高度部分代码需要根据情况修改