vue中手写动态渲染左右滚动菜单栏 点击居左 以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位。此时应该怎么做呢?(1)下面看结构:<divclass="courseCate-box"><divclass="courseCate flex":id="'cate'+pIndex"><licl...
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位。此时应该怎么做呢?
(1)下面看结构:
<div class="courseCate-box" >
<div class="courseCate flex"
:id="'cate' + pIndex" >
<li class="courseCate-li"
v-for="(cItem,cIndex) in childs"
}"
:key="cItem.id"
:id="'coursecate' + cIndex "
@touchstart="onCategoryChange(pIndex, cIndex ,pItem ,cItem)"
>{{cItem.plate_title}}
</li>
盛放菜单栏的盒子 courseCate-box 宽度设置100%
width: 100%;
height: 1.68rem;
padding-left: .2rem;
padding-right: .2rem;
box-sizing: border-box;
下面设置父元素courseCate 盒子属性, 父元素的宽度不用设置 但是一定要设置overflow-x: scroll; 不能将overflow-x: scroll;设置在courseCate-box上 否则后面设置子元素li 点击靠左滑动
时无法生效。
height: 1.12rem;
overflow-x: scroll;
height: 100%;
此时效果
子元素li的内容 可以动态生成 此时就出现了横向滚动的菜单栏效果。
(2) 如何设置每次点击 点击的子元素盒子都靠左?
这里有多种方法 虽然vue推荐通过ref去操作dom 但是这里楼主不建议,因为容易出现不可逆的操作。
方法如下:
假如你的菜单栏 和 子元素都是动态渲染生成的 ,不明白个数和内容 ,这里建议动态给设置id
比如:
v-for="(cItem,cIndex) in childs"
}"
:key="cItem.id"
:id="'coursecate' + cIndex "
然后根据动态id获取每个子元素的宽度
var element = document.getElementById('cate' + pIndex)
var item = cIndex == 0 ? 0 :document.getElementById('coursecate' + pIndex + cIndex ).clientWidth
然后获取到之后,需要设置滑动属性 这里使用scrollLeft()这个属性,具体可以参考官方文档,
注意!!! 父元素一定要设置 overflow-x: scroll; 否则不生效
然后设置
element.scrollLeft = item*cIndex;
有人会奇怪 为什么要用 element.scrollLeft = item*cIndex; 很多人都是element.scrollLeft += item;
注意如果是+= 的话 当你有底部或者头部另外的二级标题的时候
当滑动单最后一个 在反过来点击第一个的时候,此时element会出现不生效的情况
所以这边建议要不单独写当index从0到最后的scrollLeft 要不和楼主一样 用 item*cIndex
这样即使反过头为1 也会重新计算
今天的vue中滑动菜单的讲解就到这 有问题欢迎留言
更多推荐
所有评论(0)