vue 底部页面滑动,里面div不能滑动的解决
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 底部页面滑动,里面div不能滑动的解决相关的知识,希望对你有一定的参考价值。
参考技术A 为了项目需求,让背景图片不滑动,内容部分滑动。所以html,body设为width:100%;height:100%;根节点设置为width:100%;height:745px;background:url("../...png") no-repeat;由于body为一屏大小,所以不可滑动,此时要给根节点加个滑动组件包裹所有的可滑动部分。但由于使用滑动组件,导致原来里面一个能左右滑动的div不能滑动了,应该是冲突了。此时应该使用flex
html部分
<div class="historyList" v-if="historyStationList.length" >
<VScroll class="historyScroll"
:scrollingX=true
:scrollingY=false
>
<div class="stationArea">
<div
class="stationLabel"
v-for="(item, index) in historyStationList"
:key="index"
@click="clickHistoryStaion(index)"
>
<p>item["depCity"].deptCityName-item["arrCity"].arrCityName </p>
</div>
</div>
</VScroll>
<div class="clearHistoryList" @click="clearHistoryStation">
清除历史
</div>
</div>
css部分:
.historyList
.flexbox;
.flex-direction(row);
font-size: 24*@rmw2;
margin:12*@rmw2 -10*@rmw2 -10*@rmw2 -10*@rmw2;
width: 100%;
.historyScroll
width: 80%;
.flexbox;
.stationArea
.flexbox;
.flex-direction(row);
.align-items(center);
height:40*@rmw2;
padding:6*@rmw2 4*@rmw2;
box-sizing: border-box;
.stationLabel
color: #999;
margin-right: 29*@rmw2;
text-align: center;
display: inline-block;
p
white-space: nowrap;
.clearHistoryList
margin-left: 20*@rmw2;
width: 20%;
display: inline-block;
color: #4b93ff;
font-size: 24*@rmw2;
margin-right: -0.32rem;
height: 40*@rmw2;
line-height: 40*@rmw2;
margin-top: 0*@rmw2;
text-align: right;
监听页面滚动位置定位底部按钮(包含页面初始化定位不对鼠标滑动生效的解决方案)
// 核心关键 获取到数据以后调用监听的方法以免页面高度没撑起来
//导致刚进入页面计算不准确带来的定位问题
<template>
<div >
<div :class="isFixed? 's-bottom':'s-bottom s-bottmo-fixed'"> 需要定位的元素<div >
</div>
</template>
<script>
export default
layout: 'timeline',
name: 'shopping',
data()
return
isFixed:false,
,
mounted () //给window添加一个滚动滚动监听事件
window.addEventListener('scroll', this.handleScroll)
,
destroyed () //离开该页面需要移除这个监听的事件
window.removeEventListener('scroll', this.handleScroll)
,
methods:
handleScroll ()
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight;
let scrollHeight = document.documentElement.scrollHeight;
if (scrollTop + clientHeight >= (scrollHeight-50))
this.isFixed = true
else
this.isFixed = false
,
// 获取购物车列表
async getCartGoods()
const params =
...this.params,
...this.goodsForm
let data = await this.$api('mallWeb.cartGoods')(params)
this.goodList = data.dataList;
this.total = data.total
// 核心关键 获取到数据以后调用监听的方法以免页面高度没撑起来
//导致刚进入页面计算不准确带来的定位问题
this.$nextTick(()=>
this.handleScroll()
)
```
以上是关于vue 底部页面滑动,里面div不能滑动的解决的主要内容,如果未能解决你的问题,请参考以下文章
监听页面滚动位置定位底部按钮(包含页面初始化定位不对鼠标滑动生效的解决方案)
监听页面滚动位置定位底部按钮(包含页面初始化定位不对鼠标滑动生效的解决方案)