vue中手写动态渲染左右滚动菜单栏 点击居左 以及设置scrollLeft属性设置无效的原因解决

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中滑动菜单的讲解就到这  有问题欢迎留言