小米官网轮播图侧边栏动态添加-较为简单的操作（拿json数据有点枯燥，有点多）

小米官网的侧边栏里面的数据可以说是多到离谱，如果让我们自己写静态页面的话，那代码量就多到离谱，后面的购物车还没办法用到这些数据，使用动态添加数据其他页面也可以用到这些数据。

 我这里是使用的json数据添加的方式，这是里面的一条数据，因为后面购物车和数据详情页也要用到这些数据，所以这里用到的只是其中两条

 有了这些数据之后，唯一麻烦的事情来了，如何将他们排列进去

首先，我们来看一下我的结构，这是侧边栏其中的手机一栏（结构简单）：

 类名为hidden的div盒子就是后面需要装下24个手机以及手机名字的大盒子，最初是隐藏起来的，

然后就获取标签，这个不多说。

 然后再用foreach方法对li进行遍历：

有一个地方要注意一下，这个地方不能使用onmouseover事件，不然就会冒泡，用onmouseenter就可以避免冒泡。

用ajax方法获取数据（后面会附上ajax）：

这个i是因为我有十个json文件（侧边栏的十个内容对应十个文件），文件名依次按顺序排列的，所以我这样

 

 每一步都用log输出一下，看是否正确

这里是放数据的四个ul，6个一组，判定，再放进去

 最后再将反引号中的数据放入ul中：

 这样就将数据动态添加到了指定的div中了 至于css样式这些就不用多提了（其实是我比较懒，不想写css）

完整的代码（js）：

<script>

                //动态向轮播左侧边栏中添加数据
                var li = document.querySelectorAll('.list1-ul-li')
                var hidden = document.querySelectorAll('.hidden')

                // console.log(hidden);
                li.forEach(function (v, i) {
                    v.onmouseenter = function () {
                        let html1 = '';
                        let html2 = '';
                        let html3 = '';
                        let html4 = '';
                        axios.get(`./js/goods${i+1}.json`).then(data => {