记录vue中使用了transition后使用fixed引起的Bug

最近在项目的layout页面中使用了transition组件，接着页面里面某些使用fixed定位的元素就出现了问题，如图

底部导航这个元素一开始会从底部弹起

造成这样的原因可能是由于使用了fixed定位引起的，而且上面部分用了calc(100% -底部的高度)

接下就这样解决了

底部改成不用定位，滚动的地方使用calc(100vh -底部的高度)，再设置滚动，这样就解决了底部弹起的bug

.r-image {.container {width: 100%;// height: calc(100% - 120px);height: calc(100vh - 16vw -12vw - 25px); 100vh - 除了需要滚动地方的高度overflow: scroll;-webkit-overflow-scrolling: touch;}
}//底部不使用定位
.van-tabbar {height: 120px;width: 100%;background: #000000;position: static;}

记录vue中使用了transition后使用fixed引起的Bug相关推荐

Vue中el-table追加行后固定列滚动错位问题
Vue中el-table追加行后固定列滚动错位问题一.问题描述偶然发现一个问题,但是并没有找到解决方案,自己调试了两个多小时终于解决. 先贴出问题业务描述:在已查询完全部的符合条件的数据后,表格 ...
vue中后台管理登录后的token管理
在做后台管理系统的时候,登录后token管理很重要.上代码,有瑕疵,有待改善,见谅. import Vue from 'vue' import Router from 'vue-router' imp ...
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
在vue中,可以用sessionStorage或localStorage来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage),下面介绍用localS ...
解决vue中使用v-html解析后table表格的线不见了
vue中使用 v-html 解析富文本 1.在编辑器中输入什么就显示什么 2.使用v-html解析后有问题可以看看☞☞ 官网地址需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 ...
记录vue中component切换组件时销毁定时器问题
问题描述:有A.B两个子组件,通过component进行切换,子组件中有定时器,当切换组件时需要把定时器给注销掉. 1.通过VUE组件生命周期进行删除定时器 2.使用this.$once来监听定时器 ...
记录vue中mqtt使用问题
无人机时延方案 mqtt 参考demo在项目中连不上 node却没问题解决方案: 1.换成paho MQTT也没成功补充:paho MQTT成功了 let clientclient = new P ...
记录vue中使用scss报红但是不影响css样式，代码行会提示css-rcurlyexpected这个问题
要把这个地方设置为vue就行了
vue中划词选中后高亮显示web-highlighter插件
web-highlighter 插件安装:npm i web-highlighter 使用: import Highlighter from 'web-highlighter'; const hig ...
记录vue中promis使用方法
<el-button type="success" @click="sendVerify('abc')">通过验证</el-button> ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...

记录vue中使用了transition后使用fixed引起的Bug

记录vue中使用了transition后使用fixed引起的Bug相关推荐

最新文章

热门文章