用div来设置下拉的展开列表并添加scrollbar

本文介绍如何利用DIV元素及CSS属性实现一个可展开的下拉列表,通过设置数据源和利用visibility属性控制列表的显示与隐藏。文章还讨论了如何解决布局问题,如设置z-index确保列表浮动在其他元素之上,并添加滚动条来改善用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用div来设置下拉的展开列表
1.设置数据源

let moreListItem = [
            {
              status:'warn',
              name:'中海集团 资产负债率',
              value:'87.7%'
            },
            {
              status:'danger',
              name:'股份公司 净资产收益率率',
              value:'7.70%'
            },
            {
              status:'danger',
              name:'西部建设 经营性现金流',
              value:'87.7%'
            },
            {
              status:'warn',
              name:'中建港务 借贷资本率',
              value:'87.7%'
            },
            {
              status:'warn',
              name:'中建六局 资产负债率',
              value:'87.7%'
            },
          ];

2.用div的visibility属性来控制显示或者不显示

<span className={styles['spread']} onClick={this.handleClick}>展开</span>
                      <div className={classNames(styles['morecontent'],'scrollbar')} style={{ visibility:'visible'}}>
                       {
                           moreListItem.map((item,i) => {
                           const { status,project,name,value} = item
                           let text = ''
                           if (status == 'danger') {
                           text = '预警'
                           }if(status == 'warn'){
                             text = '关注'
                             }
                           return (
                           <div className={styles['listcont']}>
                               <span className={styles[`${status}`]}>{text}</span>
                               <span className={styles['item']} >{name}</span>
                               <span className={styles['item']} >{value}</span>
                               <span className={styles['item']}>{" > "}</span>
                           </div>

                           );
                           })
                       }
                       </div>

                </span>

这里注意由于所有的div默认z-index都是0所以不加z-index属性 他会把盒子撑破 所以就设置z-index = 1让他浮在其他div上面
span是不能直接设置宽高的 得在span中设置display:block 和float :left/right属性 这样就可以设置宽高 或者最大高度之类的

添加scrollbar

只要设置div的样式overflow :auto并且div是定高的就可以

在Vue.js中实现这种可拖动调整高度的布局通常涉及到响应式设计和JavaScript事件处理。你可以使用`v-on`指令结合原生JavaScript或者第三方库如Vue draggable、Element UI的ElScrollbar等来实现在上方div添加拖拽功能。以下是简要步骤: 1. 引入依赖:如果是使用Element UI,可以导入`el-scrollbar`组件;如果不是,需要自己编写或者引入一个简单的滚动条插件。 ```html <template> <div ref="scrollArea" class="draggable-container"> <!-- 上方div --> <div @mousedown.prevent="startDrag($event)" v-bind:style="{height: currentHeight + 'px'}"></div> <!-- 其他内容 --> </div> </template> <script> import { ElScrollbar } from "element-plus"; export default { components: { ElScrollbar, }, data() { return { currentHeight: 0, dragStartY: null, }; }, methods: { startDrag(event) { this.dragStartY = event.clientY; document.addEventListener("mousemove", this.onMouseMove); document.addEventListener("mouseup", this.stopDrag); }, onMouseMove(event) { const newHeight = event.clientY - this.dragStartY; this.currentHeight = Math.max(0, newHeight); // 更新滚动条高度同步更新视图 if (this.$refs.scrollArea) { this.$refs.scrollArea.update(); } }, stopDrag() { document.removeEventListener("mousemove", this.onMouseMove); document.removeEventListener("mouseup", this.stopDrag); }, }, }; </script> ``` 在这个例子中,我们监听了`mousedown`事件开始拖拽,`mousemove`事件计算新的高度更新滚动条,`mouseup`事件则停止拖拽清除事件监听。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值