uniapp shows more options and collapses through CSS one by one

Effect

insert image description here

accomplish

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

Guess you like

Origin blog.csdn.net/weixin_44391817/article/details/128092647
one
ONE