首页 > 其他分享 >vue横向滚动,并且实现点击左右按钮来进行滚动

vue横向滚动,并且实现点击左右按钮来进行滚动

时间:2023-08-29 16:44:28浏览次数:77  
标签:row1 vue 滚动 scrollBy refs 横向 点击 按钮

直接上代码,可以点击左和右两个汉字进行横向滚动

<template>
    <div class="Home">
        <div style="display: flex;height: 100%;align-items: center;">
            <div @click="scrollLeft('scrollContainer1')" style="width: 80px;text-align: center;font-size: 30px;">
                左
            </div>
            <div ref="scrollContainer1"
                style="height: 100px;width: 1000px;display: flex;justify-content: space-between;overflow-x: auto;">
                <span v-for="item in 20"
                    style="width: 120px;height: 100%;display: inline-block;background: #a3a2a2;margin-right: 5px;flex-shrink: 0;">
                    {{item}}
                </span>
            </div>
            <div @click="scrollRight('scrollContainer1')" style="width: 80px;text-align: center;font-size: 30px;">
                右
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Home',
        data() {
            return {}
        },
        mounted() {},
        methods: {
            scrollLeft(row1) {
                this.$refs[row1].scrollBy({
                    left: -600, // 每次点击滚动的距离
                    behavior: 'smooth',
                });
            },
            scrollRight(row1) {
                this.$refs[row1].scrollBy({
                    left: 600, // 每次点击滚动的距离
                    behavior: 'smooth',
                });
            },
        },
    }
</script>

<style scoped>
    ::-webkit-scrollbar {
        /* 隐藏滚动条 */
        display: none;
    }
</style>

 


翻译

搜索

复制

<iframe></iframe>

标签:row1,vue,滚动,scrollBy,refs,横向,点击,按钮
From: https://www.cnblogs.com/ShiQi-XiaoXiao/p/17665260.html

相关文章

  • Vue【原创】基于elementui的分组多选下拉框【group-list】
    效果图: 如图分为多选模式和单选模式。 group-select:1<template>2<div>3<el-select4v-model="innerValue"5:placeholder="placeholder"6@change="changeSelect"......
  • Vue项目element-ui 添加动态校验
    需求:一个表单中某个字段,根据另一个字段变化,校验是否必填<el-formref="detail":model="detail":rules="ruleData"size="small"label-width="100px"><el-card><el-row><el-col:spa......
  • vue3响应式数据重复
    记一次bug。。由于【甲方负责人】的表单是响应式的,然后直接添加到另一个响应式的数组里了,就会造成【更改表单内容,也会使数组里的值发生变化】解决方法1//添加到列表,做临时显示2constaddresponsible=()=>{3constnewResform={...resform};//添加数组之前创......
  • 【Vue】vue3 v-draggable 拖拽指令封装
    说明需求:实现一个拖拽指令,可在父元素区域任意拖拽元素,同时如果传入的值为father,则拖拽的时候以父元素为拖拽对象思路:1、设置需要拖拽的元素为absolute,其父元素为relative。2、鼠标按下(onmousedown)时记录目标元素当前的left和top值。3、鼠标移动(onmousemove)时计算每......
  • 【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件
    安装依赖首先,你需要安装xlsx和file-saver这两个库。npminstallxlsxfile-saver--save有兴趣可以看看两个库的官方说明,直接看下面使用也没问题。xlsx官方介绍TheSheetJSCommunityEditionoffersbattle-testedopen-sourcesolutionsforextractingusefuldata......
  • Vue3 Refs模板
    Refs模板用来获取页面DOM元素或者组件,类似于Vue2.X中的$refs。Refs模板的使用方法如下。(1)在setup()中创建ref对象,其值为null。(2)为元素添加ref属性,其值为步骤(1)中创建的ref对象名。(3)完成页面渲染之后,获取DOM元素或者组件。 src\views\HomeView.vue<template><d......
  • WPF设置传参、点击按钮改变长度
    前台代码<!--通过传递ElementName--><Buttonx:Name="btn1"Width="200"Height="27"Command="{BindingCommand}"CommandParameter="{BindingElementName=btn1}"/><!--......
  • Vue3 依赖注入 provide() inject()
    依赖注入就是父组件向后代组件传递数据,可以向子组件传递数据,也可以向孙子组件传递数据。在父组件中使用provide()函数,向后代传递数据。在后代组件中使用inject()函数,获取传递过来的数据。 provide()​提供一个值,可以被后代组件注入。inject()​注入一个由祖先组件或整个应......
  • vue~el-autocomplete实现组件化
    el-autocomplete核心参数可以实现异步的数据拉取,从异步返回的数据中,选择需要的结果,并回显到文本框中。fetch-suggestions回调列表,异步的方式获取数据列表,显示在列表框中@select当选中某一项时,会触发这个方法,将数据获取到,这时,我们可以将数据回显,或者赋值给父页面上的元素,如果......
  • Vue3 watch() 监听
    watch()​侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数 <template> <span> <p>{{num}}</p> <p>{{num2}}</p> <button@click="num++">+1</button> <button@click="addNum">+1</button> &......