案例效果

案例代码

<view class="addressSelect" @click="showAddressList">
	<view class="rowLeft">适用场地：</view>
		<view class="rowRight">
			共1个场地，12个设备
			<image src="/static/images/selectIcon.png" mode="widthFix" :class="isShowAddressList?'down':'up'"></image>
		</view>
	</view>
</view>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				// 默认不显示下拉框
				isShowAddressList: false
			}
		},
		methods: {
    
    
			showAddressList() {
    
    
				this.isShowAddressList = !this.isShowAddressList
			}
		}
	}
</script>

.addressSelect {
    
    
	height: 99rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: rgb(53, 53, 53);
	font-size: 28rpx;
	padding: 0 28rpx;
	border-bottom: 1rpx solid #DDDDDD;

	image {
    
    
		width: 22rpx;
		margin-left: 20rpx;
		vertical-align: middle;
	}

	.up {
    
    
		transition: all 0.3s;
	}

	.down {
    
    
		transform: rotate(-180deg);
		transition: all 0.3s;
	}

}

.showList {
    
    
	padding: 26rpx 50rpx;
	border-bottom: 1rpx solid #DDDDDD;
	font-size: 28rpx;

	.addressName {
    
    
		color: rgb(69, 69, 69);
		margin-bottom: 20rpx;
	}


	.equiName {
    
    
		color: rgb(136, 136, 136);
		margin-left: 20rpx;
		line-height: 50rpx;
	}
}