uni——手写折叠面板（图标向上向下旋转）

耶啵奶膘

已于 2023-03-27 16:13:57 修改

阅读量397

点赞数

文章标签： javascript css 前端

于 2023-03-10 15:28:08 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/129443680

版权

案例效果

在这里插入图片描述

案例代码

<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;
	}
}