vue实现横向切换自动居中

最新推荐文章于 2024-03-31 00:39:43 发布
最新推荐文章于 2024-03-31 00:39:43 发布
阅读量1.6k 收藏 3
点赞数 2
分类专栏： vue.js 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Summer_JK/article/details/110484507
版权

vue实现横向切换自动居中

想要点击的元素自动居中，首先要获取的值有：元素距离屏幕的左边距离，元素宽度的一半，屏幕的总宽度的一半，当前滚动的距离长度，下面是实现的代码：

HTMl（这里的html是我项目所需要的数据渲染，大家可以理解成ul下多个li的结构）：

      <div class="flash-list">
        <div class="scroll-box">
          <div v-for="(item, _index) in flashList" :key="_index" ref="pageContainer" class="flash-item-info" :class="active === _index + 1 ? 'active' : ''
最低0.47元/天 解锁文章
天使的同类
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue 横向滚动条 实现点击 元素滚动可视区域居中 效果
qq_40509733的博客
12-23 3469
模拟vant的Tab标签页的标签滚动效果 效果：选中元素，在滚动条的可视区域里面自动居中，头尾两端不用居中 vant效果：https://youzan.github.io/vant/#/zh-CN/tab start() { /** * 1)先让选中的元素滚到可视区域的最左边 scrollLeft * 2)接着向右移动容器一半的距离 containWidth / 2 * 3)最后向左移动item一半的距离 offsetWi...
div居中（vue框架）
chaoyumeng的博客
07-05 3077
一、定位法：position:absolute 如果子级div有定义宽和高的话就可以用这个方法。注意：margin-top,和margin-left的值均为高和宽值的一半 <template> <div class="page-div"> <div class="father"> <div class="child"></div> </div> </div&gt
vue3 el-table 表头以及表格文字居中
最新发布
nameofworld的博客
03-31 1141
使表头文字居中：:header-cell-style="{ textAlign: 'center' }"使表格内容文字居中： :cell-style="{ textAlign:'center' }" 3、fixed：接受 Boolean 值left或者 right，表示左边固定还是右边固定。2、height：可实现固定表头的表格，不需要额外的代码。5、row-class-name：改变某行的背景色。1、border：给表格加边框。
vue横向无缝滚动以及点击按钮切换
qq_53616906的博客
02-11 1550
引入vue-seamless-scroll。在main.js文件里面引入使用。computed配置。
uview tabs切换让item始终居中
小白前端
11-01 5453
在tabs中有时候我们需要制作一个切换的效果，本身u-tabs这个组件已经能满足大多数的需求，但是该组件不够灵活，于是抽时间自己做了一个scroll-view切换的效果： 下面是上图的效果的代码： <template> <view> <view class="demo"> <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-left="scrol
vue横向滑动导航条点击居中，下划线跟随移动，记录位置防刷新
weixin_44937913的博客
11-10 2434
本文是在vue框架下操作。 导航条的HTML代码如下： <div class="my-channels"> <ul class="channels" ref="channels"> <li class="channel" v-for="(value, index) in channels" :key="index" @click.stop="openCha.
vue组件横向树实现代码
10-18
【Vue 组件横向树实现详解】 在 Vue.js 开发中，有时我们需要展示数据结构为树形的组件，但希望以横向的方式展现，这样的组件被称为横向树。本篇将详细介绍如何在 Vue 中实现一个横向树组件。 首先，让我们分析...
vue 实现tab切换保持数据状态
10-15
在Vue开发过程中，保持数据状态是常见的需求，特别是在实现Tab切换功能时，用户可能希望在切换Tab后，之前填写的数据或者加载的内容能够被保存。本文将深入探讨如何在Vue中实现Tab切换时保持数据状态。 首先，让...
详解使用vue实现tab 切换操作
08-30
使用 Vue 实现 Tab 切换操作 在前端开发中，Tab 切换是一个常见的交互操作，使用 Vue 实现 Tab 切换操作可以使得界面更加灵活和交互性强。下面将介绍使用 Vue 实现 Tab 切换操作的三种思路，並对每种思路进行详细...
vue实现页面切换滑动效果
10-15
在Vue.js中实现页面切换滑动效果，可以借助Vue的内置组件`transition`以及`vue-router`来完成。`vue-router`用于处理页面间的路由跳转，而`transition`则负责过渡动画效果。以下将详细讲解如何实现这一功能。 首先...
vue实现样式之间的切换及vue动态样式的实现方法
08-28
"Vue 实现样式之间的切换及 Vue 动态样式的实现方法" Vue 实现样式之间的切换是指在 Vue 项目中实现不同的样式之间的切换，例如导航栏的样式切换功能。这种方式可以通过 Vue 的动态样式实现方法来实现。下面将详细...
Vue css各种居中显示、固定在屏幕某个位置
热门推荐
julystroy的博客
07-20 4万+
vue 前端CSS各种居中显示
vue --- 横向滚动菜单
zxsy19966的博客
06-18 8662
【vue】横向滚动菜单
vue 打印vue-print-nb
朝阳39的博客
06-19 1381
安装配置 npm install vue-print-nb --save main.js中 // 导入打印插件 import Print from 'vue-print-nb' Vue.use(Print); .vue页面中使用 <div id="printPage"> 打印内容 </div> <el-button type="primary" v-print="'printConfig'">打印</el-button> data中定义变.
web前端开发技术储久良第三版_web前端开发技术学习 -CSS flex布局
weixin_39676242的博客
12-10 184
Flex布局详解传统的网站中，布局的解决方法都是通过盒模型来控制，依赖Display,float,position来进行实现的，虽然可以解决大部分的布局情况，但是一些比较特殊的布局实现起来就存在问题了，比如我们常见的垂直居中，因此Flex就被制造出来了，随着时间的考验，flex慢慢的被浏览器和开发者接受。可以非常简单的响应各种页面布局。Flex是什么Flex称之为弹性盒子，能够给盒子模型提供更加强...
当使用vue3和element-plus时遇到的无法设置居中问题
woshitugouwat的博客
01-09 1680
vue和elementui不得不说的故事
vue 项目中使用打印功能
qq_43729779的博客
07-08 2223
第一种方法：使用window自带的打印功能 html <div id="printBox" ref="printContent> 打印内容 </div> <button @click="print">打印</button> js print(){ // 获取要打印的dom内容 let newDomHtml = this.$refs.printContent.innerHTML; // 将要打印的内容赋值给本页 window.document.b
Table样式
yuzheh521的博客
11-11 233
<style type="text/css"> table { border-collapse: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; colo.
vue实现轮播图自动切换
04-25
Vue实现轮播图自动切换可以使用vue-awesome-swiper插件。首先，在项目中安装该插件，然后在需要使用轮播图的组件中引入该插件。接着，在data中定义swiperOption对象，设置相关参数，如自动播放时间间隔、轮播速度等。最后，在template中引入轮播图组件，使用v-for循环渲染图片列表，添加swiper-slide类名和图片地址作为属性即可实现轮播图自动切换。具体代码如下： <template> <div class="home-carousel"> <swiper :options="swiperOption"> <swiper-slide v-for="item in imgList" :key="item.id" :style="{backgroundImage: `url(${item.src})`}"></swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> import 'swiper/css/swiper.css' import {Swiper, SwiperSlide} from 'vue-awesome-swiper' export default { name: 'HomeCarousel', components: { Swiper, SwiperSlide }, data: function () { return { imgList: [ {id: 1, src: require('@/assets/images/home-carousel/home-carousel-1.jpg')}, {id: 2, src: require('@/assets/images/home-carousel/home-carousel-2.jpg')}, {id: 3, src: require('@/assets/images/home-carousel/home-carousel-3.jpg')} ], swiperOption: { loop: true, autoplay: { delay: 3000, disableOnInteraction: false }, pagination: { el: '.swiper-pagination' }, speed: 600 } } } } </script>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值