uniapp一一通过CSS实现展示更多选项和收起

效果

实现

html:

<!--控制选项展示隐藏-->
      <div :class="isShow?'button-height':''">
          <!--选项内容-->
      </div>
      <view class="unfold" @click="unfold">
		<u-icon name="arrow-down"></u-icon>
	  </view>
<!--更多选项按钮展示 | 控制选项的展示和隐藏-->

js：

	// 是否收起，默认收起
	isShow: true,
	
	methods: {
		/**
		 * 收起/展开按钮点击事件
		 */
		unfold() {
			this.isShow = !this.isShow;
		},
	}

css:

	.unfold {
		width: 50rpx;
		margin: 0 auto;
	}

	.button-height {
		// 通过高度控制内容的展示
		height: 20vmin;
		overflow: hidden;
	}