在vue项目中运用better-scroll插件进行上拉加载的功能时,页面拉不动。

  html结构:

<div class="wrapper" ref="wrapper">
<ul class="now-film content">
<li class="now-film-item" v-for="(item, index) in now" @click="handleClick()">
<div class="now-film-item-img">
<img :src="item.poster.origin" alt="">
</div>
<div class="now-film-item-tips">
<div class="now-film-item-tips-top">
<span>{{item.name}}</span>
<span>{{item.grade}}</span>
</div>
<p class="now-film-item-tips-center">{{item.intro}}</p>
<div class="now-film-item-tips-bottom">
<span>{{item.cinemaCount}}家影院上映</span>&nbsp;&nbsp;
<span>{{item.watchCount}}人购票</span>
</div>
</div>
</li>
</ul>
</div>

  html结构没问题

先看下浏览器滚动条生效的原理:

  浏览器的滚动原理: 浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容

失效原因:

  其实better-scroll文档已经说得很清楚了:当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器(wrapper)的高度,我们就可以滚动内容区了

  当把BScroll打印出来发现hasVerticalScroll属性为false,则一定是wrapper和content计算高度时出错了。此时,对比下scrollerHeight和wrapperHeight,多半是前者小于等于后者。然后,手动修改hasVerticalScroll为true,会发现可以拖拽,但不是滚动。这是因为scrollerHeight计算错误。

  高度计算出错多半是因为dom没更新完就初始化BS。(BS必须在dom完成之后被初始化),但我这里的问题出在wrapper的高度等于content的高度,所以就不能滚动了

  

  

  #app的height为100%

  .header-wrapper高度固定

  我当时.wrapper的高度也是100%,由于100%是相对于父元素的高度,但此时父元素.movie并没有设置高度,所以父元素的高度等于子元素撑开的高度,由于.movie-tab也是固定高度,所以.wrapper的高度等于父元素的高度减去.movie-tab的高度,也就等于ul的高度,所以better-scroll不生效。

解决方案:

  将.wrapper的父元素.movie的高度也设为100%,此时.movie的高度就等于#app的高度减去.header-wrapper的高度(页面的剩余高度),那么.wrapper的高度也就等于页面上可视的wrapper高度,高度就固定了

反思:

  1、html和css基础不够扎实,百分比理解不够透彻

  2、解决该问题花了很长时间,其实发现还是自己百度或谷歌解决最快

延伸:

  1、屏蔽滚动条的方法:出现滚动条是因为内容去大于包裹区,所以给包裹区加个overflow:hidden就行了

  2、better-scroll插件的使用

    (1)npm install better-scroll --save

    (2)import BScroll from 'better-scroll'

    (3)

mounted() {
//第一个参数是滚动元素的外盒子 第二个参数是配置项
this.scroll = new BScroll(this.$refs.wrapper,{
click:true,
pullUpLoad:true
}) //当用户上拉时触发的事件
this.scroll.on("pullingUp",()=>{
this.handleNow_getNowMovie(++this.pageNum)
})
},
updated () {
//重新计算高度
this.scroll.refresh();
//当数据加载完毕以后通知better-scroll
this.scroll.finishPullUp();
}

(4)

const actions = {
handleNow({commit}, params) {
if (params < 7) {
axios({
method: 'get',
url: '/v4/api/film/now-playing?page=' + params + '&count=7',
}).then((res) => {
commit('handleNow', res.data.data.films);
console.log(res);
});
} }
}

(5)

const mutations = {
handleNow(state, params) {
    //防止后面的数据覆盖前面的数据
state.now = [...state.now, ...params];
console.log(state.now);
}
}

  

better-scroll不生效原因的更多相关文章

  1. springboot aop 不生效原因解决

    最近参照资料创建Springboot AOP ,结果运行后aop死活不生效. 查明原因: 是我在创建AOP类时选择了Aspect类型,创建后才把这个文件改为Class类型,导致一直不生效, 代码配置这 ...

  2. solr 请求参数过长报错,Solr配置maxBooleanClauses属性不生效原因分析

    博客分类:   上次已经写过一篇关于solr中,查询条件过多的异常的文章,这次在总结扩展一下: 有时候我们的查询条件会非常多,由于solr的booleanquery默认设置的条件数为1024,所以超过 ...

  3. [转]关于tomcat 中的 tomcat-users.xml 配置不生效原因

    安装完tomcat,或者解压完tomcat后,在tomcat的目录下有个conf文件夹,在这个文件夹下面有一个tomcat- users.xml的文件,这个文件里面的配置信息是当我们进入http:// ...

  4. ant design select placeholder不生效原因

    当select的value绑定一个state默认值时,如果默认值是''或null时,placeholder不生效 解决方案:默认值设为undefined

  5. spring boot @Scheduled未生效原因以及相关坑、及相对其他定时任务架构的优势

    在spring boot中,支持多种定时执行模式(cron, fixRate, fixDelay),在Application或者其他Autoconfig上增加@EnableScheduling注解开启 ...

  6. idea web项目debug模式实时更新按钮不生效原因

    必须两个都开启才能生效,单按按钮不能生效,但是有时候自动更新不生效的时候按按钮后可以生效, 如果前端目录或后端内容实在不更新,就删掉out目录和target目录,重新启动服务器即可

  7. React中多行文本省略不生效原因

    在普通的前端项目中,在不考虑兼容问题的时候,可以用以下代码实现: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; - ...

  8. @Cacheable注解不生效原因

    因为@Cacheable注解应用了AOP动态代理,生成代理类,判断缓存中是否存在该key,如果不存在则调用被代理类的标有@Cachable注解的方法,否则不执行. 所以当类A的方法a调用方法b(标有@ ...

  9. Git忽略规则(.gitignore配置)不生效原因和解决

    问题: .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,或者用git status查看状态,想要忽略的文件还是显示被追踪状态. 原因是因为在gi ...

随机推荐

  1. c语言格式控制符

    http://zhidao.baidu.com/link?url=-YJjz3U0fd_eSW9eLa8ankGo_QbyOOOaKYWyAY9g4mKWQj0DN6l12OSLJz24U8jCwo1 ...

  2. python基础--xml和configparse模块

    1)XML模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多. 下面是xml的遍历查询删除修改和生成 # -*- coding:utf-8 -*- __author__ = 's ...

  3. Python 文件IO

    Python 文件I/O 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你传递的表达式转换成一个字符串表达式,并将结果写到标准输出如下: #!/u ...

  4. Docker - CentOS安装Docker

    如果要在CentOS下安装Docker容器,必须是CentOS 7 (64-bit).CentOS 6.5 (64-bit) 或更高的版本,并要求 CentOS 系统内核高于 3.10. uname ...

  5. java基础22 日期类、日历类、日期格式类

    package com.dhb.code; import java.text.ParseException; import java.text.SimpleDateFormat; import jav ...

  6. 产看Linux运行时间

    Linux下如何查看系统启动时间和运行时间 1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.0 ...

  7. pip3

    pip3 install django #安装rabbitmq连接模块 pip3 install pika pip3 install paramiko pip3 install ipython pip ...

  8. LeetCode282. Expression Add Operators

    Given a string that contains only digits 0-9 and a target value, return all possibilities to add bin ...

  9. Kubernetes 概述和搭建(多节点)

    一.Kubernetes整体概述和架构 Kubernetes是什么 Kubernetes是一个轻便的和可扩展的开源平台,用于管理容器化应用和服务.通过Kubernetes能够进行应用的自动化部署和扩缩 ...

  10. CCF CSP 201609-3 炉石传说

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201609-3 炉石传说 问题描述 <炉石传说:魔兽英雄传>(Hearthston ...