iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现左右滑动效果实例代码
  • 398
分享到

vue实现左右滑动效果实例代码

2024-04-02 19:04:59 398人浏览 独家记忆
摘要

前言 个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,Vue 是一套用于构建用户界面的渐进式

前言

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行!

vue.js是现在流行的js框架之一,Vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,另外一个方面,当vue与现代化的工具链以及各种支持类库结合使用时,vue也完全能够为复杂的单页应用提供驱动。

vue.js是用于构建交互式的WEB界面的库,它提供MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的api。从技术上讲,vue.js集中在MVVM模式上的视图模型层(viewModel),并通过双向数据绑定连接视图(view) 和模型(model)。实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM框架,vue.js更容易上手,它让你通过简单而灵活的API创建由数据驱动的UI组件。

实例代码

HTML代码


<template>
    <div id="SlideBar" class="box">
        <div class="item" ref="slide" :style="slideStyle" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)">
          <img src="Http://img2.imgtn.bdimg.com/it/u=2555191195,2735808065&fm=26&gp=0.jpg" alt="">
          <div class="right">
            <div class="title">你好!</div>
            <p class="text">哈哈哈</p>
            <p class="price">好不</p>
          </div>
        </div>
        <div class="btn" ref="btn">
            <button>编辑</button>
            <button style="background:#387ef5;color:#fff">收藏</button>
        </div>
    </div>
</template>

CSS代码


<style>
.box{
    position:relative;
    border-bottom:0.026667rem solid #666666;
}
.btn{
  height:100%;
  position:absolute;
  right:0;
  top:0;
  background:red;
  display:flex;
}
button{
  width:1.6rem;
  height:100%;
  background:#f8f8f8;
  border:none;
}
.item{
  padding:0.266667rem;
  display:flex;
  position:relative;
  background:#fff;
  z-index: 2;
  box-shadow: 0.026667rem 0 0.053333rem #DDD;
}
.item img{
  width:2.133333rem;
  height:2.133333rem;
  margin-right:0.4rem;
  border-radius: 0.133333rem;
}

.item .title{
  font-size:0.48rem;
  float: left;
}
.item .text{
  font-size:0.426667rem;
  color:#888;
  float: left;
  margin: 0 1.33rem;
}
.item .price{
  color:#888;
  float: left;
  margin: 0 1.33rem;
}
</style>

JS代码


<script>
    export default {
        name: 'SlideBar',
        props: {

        },
        data (){
            return {
                flag: false,
                startX: 0,
                endX: 0,
                slideStyle: {
                    left: 0,
                    transition: 'none'
                }
            }
        },
        methods: {
            start (e){  //记录开始滑动屏幕的X轴的位置
                this.flag = true;
                this.startX = e.touches[0].clientX;
                this.endX = this.$refs.slide.offsetLeft;
                this.slideStyle.transition = 'none';
            },
            move (e){
                if(this.flag){
                    // 处理鼠标移动的逻辑
                    var moveX = this.endX + (e.touches[0].clientX - this.startX);  //计算滑动的距离
                    if(Math.abs(moveX) >= this.$refs.btn.offsetWidth && moveX < 0){  //判断滑动的距离是否大于class:btn的宽度
                        moveX = (Math.abs(moveX) - this.$refs.btn.offsetWidth) * 0.1; // 0.3阻力系数
                        this.slideStyle.left = - this.$refs.btn.offsetWidth - moveX + 'px';
                    }else if(moveX >= 0){  //滑动距离是否大于等于0
                        this.slideStyle.left = 0 + 'px';  //大于等于0让class:item等于0
                    }else{
                        this.slideStyle.left = moveX + 'px';  //小于0让class:item等于滑动的距离
                    }
                }
            },
            end (e){
                if(this.flag){
                    this.flag = false;
                    // endX = slide.offsetLeft;
                    var moveX = e.changedTouches[0].clientX - this.startX;  //计算滑动的距离
                    this.slideStyle.transition = 'left .3s';
                    var btnWidth = this.$refs.btn.offsetWidth;  //class:btn的宽度
                    if(moveX < 0){
                        if(Math.abs(moveX) >= btnWidth / 2 || Math.abs(this.$refs.slide.offsetLeft) >= this.$refs.btn.offsetWidth){ //是否大于class:btn宽度的一半
                            this.slideStyle.left = - btnWidth + 'px';  //左滑超过class:btn宽度的一半就滑回去
                        }else if(Math.abs(moveX) < btnWidth / 2){  //小于class:btn宽度的一半
                            this.slideStyle.left = 0 + 'px';  //左滑没有超过class:btn宽度的一半回原位
                        }
                    }else if(moveX > 0 && this.endX != 0){
                        if(Math.abs(moveX) >= btnWidth / 2){
                            this.slideStyle.left = 0 + 'px';  //右滑超过class:btn宽度的一半就滑回去
                        }else if(Math.abs(moveX) < btnWidth / 2){
                            this.slideStyle.left = - btnWidth + 'px';  //右滑没有超过class:btn宽度的一半回原位
                        }
                    }
                }
            }
        },
        mounted (){
            var _this = this;
            // 使用js的现代事件监听transition过渡结束
            this.$refs.slide.addEventListener('transitionend',function(){
                _this.endX = this.offsetLeft;
            })
        }
    }
</script>

总结

到此这篇关于vue实现左右滑动效果的文章就介绍到这了,更多相关vue左右滑动内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue实现左右滑动效果实例代码

本文链接: https://www.lsjlt.com/news/126598.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现左右滑动效果实例代码
    前言 个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式...
    99+
    2024-04-02
  • 使用vue怎么实现左右滑动效果
    使用vue怎么实现左右滑动效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。HTML代码<template>    &l...
    99+
    2023-06-15
  • android左右滑动切换效果怎么实现
    在Android中,可以通过使用ViewPager组件来实现左右滑动切换效果。 首先,在XML布局文件中添加一个ViewPager组...
    99+
    2023-10-23
    android
  • vue实现左右点击滚动效果
    本文实例为大家分享了vue实现左右点击滚动,效果如图 涉及功能点 1、在created中使用r e f s 结 合 refs结合refs结合nextTick仍然无法获取到元素的问题...
    99+
    2024-04-02
  • vue实现列表左右联动效果
    本文实例为大家分享了vue实现列表左右联动效果的具体代码,供大家参考,具体内容如下 先谈需求:左侧为分类列表,点击分类名右侧商品列表会滑动对应分类到顶部;右侧商品列表滑动到某一分类时...
    99+
    2024-04-02
  • vue如何实现左右滑动tab(vue-touch)
    目录下载(vue-touch)main.js中引入开始使用vue-touch 的相关事件开始做tab切换下载(vue-touch) npm install vue-touch@nex...
    99+
    2024-04-02
  • vue实现顶部左右滑动导航
    日常开发中经常用到导航这些东西,写篇文章记录下。该导航实现为点击末尾/起首位置,导航自动滑动出下一项的效果。 思路:判断当前点击项,相对与屏幕的位置,若点击的位置,满足可移动的限制,...
    99+
    2024-04-02
  • Android手势左右滑动效果
    最近想实现Android左滑弹出菜单框,右滑消失菜单这个个功能。了解了一下Android 的滑动事件,必须是在view组件或者Activity上实现,同时必须实现OnTouchListener, OnGestureListener这个两个接...
    99+
    2023-05-30
    android 手势 滑动
  • Android开发中利用HorizontalScrollView实现一个左右滑动效果
    这期内容当中小编将会给大家带来有关Android开发中利用HorizontalScrollView实现一个左右滑动效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。效果图一.什么是HorizontalSc...
    99+
    2023-05-31
    android horizontalscrollview roi
  • 微信小程序左右滚动公告栏效果代码实例
    以下是一个微信小程序左右滚动公告栏的代码实例:1. 在微信小程序的wxml文件中,创建一个scroll-view组件用于显示公告:`...
    99+
    2023-08-16
    微信小程序
  • Vue3实现一个可左右滑动操作组件的示例代码
    目录代码实现如何使用为了实现左右滑动能够切换页面,便有了做成组件的想法。 代码实现 监听touchstart,记录开始位置。 监听touchmove,记录移动的位置,计算移动的方向...
    99+
    2022-11-21
    Vue左右滑动组件 Vue左右滑动 Vue 滑动组件
  • vue 路由切换过渡动效滑入滑出效果的实例代码
    效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {tra...
    99+
    2024-04-02
  • 怎么用vue实现顶部左右滑动导航
    这篇“怎么用vue实现顶部左右滑动导航”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用vue实现顶部左右滑动导航”文章吧...
    99+
    2023-07-04
  • vue实现顶部左右滑动导航的方法
    这篇文章主要讲解了“vue实现顶部左右滑动导航的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue实现顶部左右滑动导航的方法”吧!日常开发中经常用到导航这些东西,写篇文章记录下。该导航...
    99+
    2023-06-20
  • 如何用css实现左右运动效果
    本篇内容介绍了“如何用css实现左右运动效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • Androidstudio实现左右滑动切换图片
    本文实例为大家分享了Android studio实现左右滑动切换图片的具体代码,供大家参考,具体内容如下 切换图片首先要使用到图片切换器ImageSwitcher 先了解一下Imag...
    99+
    2024-04-02
  • Android基于ViewPager+Fragment如何实现左右滑屏效果
    这篇文章主要为大家展示了Android基于ViewPager+Fragment如何实现左右滑屏效果,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。本文实例讲述了Android基于ViewPage...
    99+
    2023-05-31
    android viewpager fragment
  • vue实现滑动和滚动效果
    本文实例为大家分享了vue实现滑动和滚动效果的具体代码,供大家参考,具体内容如下 面板滑动效果,父组件是resultPanel,子组件是resultOption,仿照了iview中,...
    99+
    2024-04-02
  • vue实现界面滑动效果
    本文实例为大家分享了vue实现界面滑动效果的具体代码,供大家参考,具体内容如下 项目需求+效果图 1.项目需求 【点击底部导航栏,切换页面的时候,会有一个滑动的效果】 2.效果图 ...
    99+
    2024-04-02
  • Android怎么实现菜单左右滑动
    在Android中,实现菜单左右滑动可以通过使用ViewPager和Fragment来实现。下面是实现的步骤:1. 在布局文件中,添...
    99+
    2023-09-28
    Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作