js点击居中

最新推荐文章于 2024-03-30 15:09:11 发布

Glowworms浠

最新推荐文章于 2024-03-30 15:09:11 发布

阅读量945

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_45533739/article/details/122581908

版权

<style>
#app{
    min-height:100vh;
    .typebox{
        overflow-x: auto;white-space:nowrap;width: auto;margin:5.33vw auto 0;position: sticky;position: -webkit-sticky;z-index:20;padding:1vw 3.2vw 2.13vw;
        .typeli{
            display: inline-flex;margin-right: 6.67vw;
            .typetxt{
                margin-bottom:1.8vw;
            }
            .line{
                width: 5.6vw;height: 0.8vw;
            }
        }
        .typeli.active{
            font-size:4.3vw;color:#24a266;font-weight:bold;
        }
    }
}
</style>
<body>
	<div id="app" v-cloak="" >
		<div class="typebox bg-f9f9f9" id="box" :style="{'top':`${navTop}px`}">
	          <div class="typeli flex-column-center f-3-7" @click.stop="choosetype(index)" :class="{active:typeindex==index}" v-for="(vo,index) in firstCate" :key="index">
	               <div class="typetxt">{{vo.cat_name}}</div>
	               <div class="line bg-24a266" v-if="typeindex==index"></div>
	           </div>
	       </div>
	</div>
</body>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    vm.navTop = document.querySelector('#header').offsetHeight;
	//初始化fastclick方法
    window.addEventListener('load', function () {
        FastClick.attach(document.body);
    }, false);
    var vm = new Vue({
		el:'#app',
		data:{
        	navTop:'',
        	typeindex:'0',
		},
		methods:{
			choosetype(index){
				var doc = document
	            // 当前视窗的宽度
	            var WINDOW_OFFSETWIDTH = doc.documentElement.clientWidth
	            var liArr = doc.querySelectorAll('#box > .typeli')
	            // 获取当前点击元素的宽度
	            var itemWidth = liArr[index].offsetWidth
	            // 当前事件对象相对移动的距离
	            var moveX =liArr[index].offsetLeft
	            // 目标居中的距离 = (当前元素距离左边的相对距离 / 2)+ (视口距离 / 2)
	            var left = moveX - (WINDOW_OFFSETWIDTH / 2) + (itemWidth / 2)
	            doc.getElementById('box').scrollLeft = left;

				vm.typeindex = index;
	            vm.goodslist = [];
	            vm.page = 1;
	        	vm.get_goodslist();
	        },
        }
    })
</script>