VUE实现吸底按钮

本文实例为大家分享了VUE实现吸底按钮的具体代码，供大家参考，具体内容如下

<template>
 <div id="test">
 <ul class="list-box">
 <li v-for="(item, key) in 50" :key="key">
 {{ item }}
 </li>
 </ul>
 <transition name="fade">
 <p :class="['go', { isFixed: headerFixed }]" v-if="headerFixed">
 吸底按钮
 </p>
 </transition>
 </div>
</template>

<script>
export default {
 name: 'test',
 data() {
 return {
 headerFixed: false,
 }
 },
 mounted() {
 window.addEventListener('scroll', this.handleScroll)
 },
 destroyed() {
 window.removeEventListener('scroll', this.handleScroll)
 },
 methods: {
 handleScroll() {
 const scrollTop =
 window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 this.headerFixed = scrollTop > 50
 },
 },
}
</script>

<style lang="scss" scoped="scoped">
#test {
 .list-box {
 padding-bottom: 50px;
 }
 .go {
 background: pink;
 text-align: center;
 line-height: 50px;
 width: 100%;
 }
 .isFixed {
 position: fixed;
 bottom: 0;
 }
 .fade-enter {
 opacity: 0;
 }
 .fade-enter-active {
 transition: opacity 0.8s;
 }
 .fade-leave-to {
 opacity: 0;
 }
 .fade-leave-active {
 transition: opacity 0.8s;
 }
}
</style>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现吸顶、锚点和滚动高亮按钮效果

    因公司后台管理系统很多功能技术老旧,最近在用vue重构公司的后台管理系统,在做商品管理添加商品这一块,借鉴淘宝的添加商品的交互,需要实现一个简单的吸顶.锚点和滚动高亮按钮的效果. 需求 滚动页面到顶部,实现某元素固定到顶部效果 点击某个按钮,页面滚动到相应的位置 滚动页面,当到达某个位置时,高亮对应的相关按钮 元素吸顶实现方式 关于元素吸顶效果,通过查阅相关资料和相关测试,有三种方式(还有一种是jquery的方法,这里就不介绍了) 一.使用position:sticky 1. 什么是positi

  • vue实现某元素吸顶或固定位置显示（监听滚动事件）

    vue实现某元素吸顶或固定位置显示（监听滚动事件）

    最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () {

  • 实现一个 Vue 吸顶锚点组件方法

    前言 近期产品小哥哥给我提了一个新需求,在一个页面的滚动区中添加一组锚点定位按钮,点击按钮将对应的元素显示在页面的可视区中.当按钮组超出页面可视区的时候将其固定在滚动区域的头部,当滚动区滚动时,高亮距离滚动区顶部最近的元素所匹配的锚点按钮. 拆分功能点 现在我们已经明确需求了,接下来我们总结一下这个需求有哪些功能点: 按钮组要有吸顶效果 点击按钮要有锚点定位功能 滚动内容区需要找到对应的按钮并高亮 吸顶组件 要做一个吸顶效果最简单的方式是将 css 的 position 属性设置为 sticky

  • vue滑动吸顶及锚点定位的示例代码

    在上篇文章给大家介绍了vue实现吸顶.锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看https://www.jb51.net/article/172365.htm 今天给大家继续分享vue滑动吸顶及锚点定位的代码,具体内容如下所示: Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id='menu'> <ul> <li v-for=&q

  • vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

    utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf

  • vue中多路由表头吸顶实现的几种布局方式

    vue项目多路由表头吸顶实现的几种布局方式 因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的每个table滚动到顶端表头吸顶,所以尝试用vux做这种需求, 一.先聊js. A.首先在vux可以这样设置. 1.在state文件中设置状态. techo:{ partsFixed:false, repairFixed:false, mateFixed:false, outRepairFixed:false }//吸顶状态 2.在action中commi

  • vue实现可移动的悬浮按钮

    本文实例为大家分享了vue实现可随处移动悬浮按钮的具体代码,供大家参考,具体内容如下 1.html代码 <div class="callback float" @click="onClick" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end&quo

  • Vue开发实现吸顶效果的示例代码

    因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还是挺简单的,因为在css中我们可以设置一个元素的 position: fixed; ,这样它就可以固定在那里,这样不管页面怎么滚动,它的位置都不受影响,所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可以了.但是这个合适的时机是什么时候呢,这就需要我们计算了,

  • VUE实现吸底按钮

    VUE实现吸底按钮

    本文实例为大家分享了VUE实现吸底按钮的具体代码,供大家参考,具体内容如下 <template> <div id="test"> <ul class="list-box"> <li v-for="(item, key) in 50" :key="key"> {{ item }} </li> </ul> <transition name="f

  • 微信小程序中吸底按钮适配iPhone X方案

    微信小程序中吸底按钮适配iPhone X方案

    随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图: 截图来自网络,侵删 是bug就得修,是体验问题就得优化,于是立马搞了一台iPhone X开始研究. 网页端的适配还好,有 viewport meta

  • 微信小程序吸底区域适配iPhoneX的实现

    微信小程序适配iPhone X主要针对fix定位到底部的区域,比如详情页或购物车底部的按钮栏,会与iPhone X的Home Indicator横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图: 旧方法 1. 获取设备信息 /** * 获取设备信息 * @returns {Promise<any>} */ export function wechatGetSystemInfo () { return new Promise((resolve, reject) => { wx.g

  • 使用vue实现点击按钮滑出面板的实现代码

    在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • vue 表单验证按钮事件交由父组件触发的方法

    vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> <FormItem label="Age" prop="age"> <Input type="

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

  • Vue实现点击按钮复制文本内容的例子

    点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1.引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.

随机推荐