vue滚动固定顶部及修改样式的实例代码
滚动固定位置有多种方法
1 css3 粘性定位
position:sticky; top:20px;
2直接position:fixed;给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度
3事件监听更改style中的position属性
**
修改样式
滚动监听事件中使用this.$refs.xxx.style.color=‘xxxx'
这种方式会报错
Uncaught TypeError: Cannot read property 'style' of undefined
所以通过动态绑定来解决。
具体:
**
html绑定
<p class="ptop1" :style="pstyle"> <img @click="back()" :src='topimgs'> </p>
data中设置属性
data() { return { pstyle:{background:'#595552'}, pastyle:{background:'#595552'}, pbstyle:{background:'#fff'}, }; },
mounted中添加事件监听
window.addEventListener(“scroll”, this.handleScroll);
methods中添加方法,在方法中修改
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop>100){ this.pstyle=this.pbstyle; }else{ this.pstyle=this.pastyle; }
总结
以上所述是小编给大家介绍的vue滚动固定顶部及修改样式的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
vue 动态修改a标签的样式的方法
公司要做一个类似今日头条的项目,用前后端分离的方式做成HTML5页面,先在微信中运行,领导说想看看效果怎么样.今日头条头部的导航是可以滚动和添加类别的,我们这个项目也是一样.所以在导航这个地方就需要在点击不同分类的同时,样式也是跟着变的,我在网上搜索了一下,发现了下面的代码,简洁清淅,不过具体网址忘记了,先把代码贴出来给大家看一下,想知道网址的可以去网上搜索一下. <!DOCTYPE html> <html lang="en"> <head> <
-
vue页面切换到滚动页面显示顶部的实例
在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律 三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部 四.代码实现:vue里面写法如下,至于updated生
-
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由
-
vue里面父组件修改子组件样式的方法
在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式
-
vue中element组件样式修改无效的解决方法
如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st
-
Vue修改mint-ui默认样式的方法
在使用vue框架开发时,饿了么的mint-ui框架是个不错的选择,但是有时候我们需要修改它的默认样式,方法如下: 1.在src/assets/css目录下新建scss文件,my-mint.scss,内容如下: /* 覆盖mint-ui的primary颜色,改为自己UI的主题色 */ $color-primary: #05AFAF; .mint-header { background-color: $color-primary; } .mint-button:not(.is-disabled):a
-
vue滚动固定顶部及修改样式的实例代码
滚动固定位置有多种方法 1 css3 粘性定位 position:sticky: top:20px: 2直接position:fixed:给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度 3事件监听更改style中的position属性 ** 修改样式 滚动监听事件中使用this.$refs.xxx.style.color='xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所
-
vue通过style或者class改变样式的实例代码
通过style改变样式 <div :style="{ 'min-height': size + 'px' }"></div> <div :style="[{ 'min-height': size + 'px' },{color:'red'}]"></div> <div :style="{ 'opacity': value ? 0.5 : 1 }"></div> 通过class
-
JS获取和修改元素样式的实例代码
1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style
-
修改 bootstrap table 默认detailRow样式的实例代码
废话不多说了,直接给大家贴代码,具体代码如下所示: this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () { var $this = $(this), //a.detail-icon $tr = $this.parent().parent(), //current row index = $tr.data('index'), row = data[index
-
微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="
-
vue使用一些外部插件及样式的配置代码
一.配置全局css及js样式 1.首先将事先写好的css文件及js文件放在src文件目录下的assets文件下 2.在main.js文件输上图右边两个红色框的代码 二.配置全局jQuery及bootstrap 安装插件步骤: >: cnpm install jquery vue/cli 3 配置jQuery:在vue.config.js中配置(没有,手动项目根目录下新建) const webpack = require("webpack"); module.exports = {
-
vue中选中多个选项并且改变选中的样式的实例代码
1:HTML: <ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</d
-
vue中keep-alive内置组件缓存的实例代码
需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期
-
vue实现表格增删改查效果的实例代码
整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p
-
Vue实现按钮旋转和移动位置的实例代码
1.静态效果图 Chrom移动端浏览模式下可拖动按钮处于任意位置,并且点击可旋转按钮 2.代码 <template> <div id="app"> <div class="icon-add-50" :style="iconstyle" @click='click' @touchmove='touchmove' @touchstart='touchstart(this,$event)' @touchend='touch
随机推荐
- AngularJs 国际化(I18n/L10n)详解
- 让FLEX日历控件成中文显示的方法
- java设计模式之桥接模式(Bridge)
- oracle SCN跟TIMESTAMP之间转换
- ASP.NET MVC3 实现全站重定向的简单方法
- php 进度条实现代码
- python冒泡排序算法的实现代码
- Docker如何使用OpenvSwitch网桥
- python实现类的静态变量用法实例
- Python pass详细介绍及实例代码
- 分组后分组合计以及总计SQL语句(稍微整理了一下)
- Psi,sccm,dB分别是什么含义?
- 阿里云Centos 7.5安装Mysql的教程
- 初识JQuery 实例一(first)
- js实现div层缓慢收缩与展开的方法
- 自用js开发框架小成 学习js的朋友可以看看
- php密码生成类实例
- C语言编程中函数的基本学习教程
- 用javascript实现的激活输入框后隐藏初始内容
- 使用JS获取SessionStorage的值