better-scroll不生效原因
在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>
<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不生效原因的更多相关文章
- springboot aop 不生效原因解决
最近参照资料创建Springboot AOP ,结果运行后aop死活不生效. 查明原因: 是我在创建AOP类时选择了Aspect类型,创建后才把这个文件改为Class类型,导致一直不生效, 代码配置这 ...
- solr 请求参数过长报错,Solr配置maxBooleanClauses属性不生效原因分析
博客分类: 上次已经写过一篇关于solr中,查询条件过多的异常的文章,这次在总结扩展一下: 有时候我们的查询条件会非常多,由于solr的booleanquery默认设置的条件数为1024,所以超过 ...
- [转]关于tomcat 中的 tomcat-users.xml 配置不生效原因
安装完tomcat,或者解压完tomcat后,在tomcat的目录下有个conf文件夹,在这个文件夹下面有一个tomcat- users.xml的文件,这个文件里面的配置信息是当我们进入http:// ...
- ant design select placeholder不生效原因
当select的value绑定一个state默认值时,如果默认值是''或null时,placeholder不生效 解决方案:默认值设为undefined
- spring boot @Scheduled未生效原因以及相关坑、及相对其他定时任务架构的优势
在spring boot中,支持多种定时执行模式(cron, fixRate, fixDelay),在Application或者其他Autoconfig上增加@EnableScheduling注解开启 ...
- idea web项目debug模式实时更新按钮不生效原因
必须两个都开启才能生效,单按按钮不能生效,但是有时候自动更新不生效的时候按按钮后可以生效, 如果前端目录或后端内容实在不更新,就删掉out目录和target目录,重新启动服务器即可
- React中多行文本省略不生效原因
在普通的前端项目中,在不考虑兼容问题的时候,可以用以下代码实现: overflow : hidden; text-overflow: ellipsis; display: -webkit-box; - ...
- @Cacheable注解不生效原因
因为@Cacheable注解应用了AOP动态代理,生成代理类,判断缓存中是否存在该key,如果不存在则调用被代理类的标有@Cachable注解的方法,否则不执行. 所以当类A的方法a调用方法b(标有@ ...
- Git忽略规则(.gitignore配置)不生效原因和解决
问题: .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,或者用git status查看状态,想要忽略的文件还是显示被追踪状态. 原因是因为在gi ...
随机推荐
- c语言格式控制符
http://zhidao.baidu.com/link?url=-YJjz3U0fd_eSW9eLa8ankGo_QbyOOOaKYWyAY9g4mKWQj0DN6l12OSLJz24U8jCwo1 ...
- python基础--xml和configparse模块
1)XML模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多. 下面是xml的遍历查询删除修改和生成 # -*- coding:utf-8 -*- __author__ = 's ...
- Python 文件IO
Python 文件I/O 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你传递的表达式转换成一个字符串表达式,并将结果写到标准输出如下: #!/u ...
- Docker - CentOS安装Docker
如果要在CentOS下安装Docker容器,必须是CentOS 7 (64-bit).CentOS 6.5 (64-bit) 或更高的版本,并要求 CentOS 系统内核高于 3.10. uname ...
- java基础22 日期类、日历类、日期格式类
package com.dhb.code; import java.text.ParseException; import java.text.SimpleDateFormat; import jav ...
- 产看Linux运行时间
Linux下如何查看系统启动时间和运行时间 1.uptime命令输出:16:11:40 up 59 days, 4:21, 2 users, load average: 0.00, 0.01, 0.0 ...
- pip3
pip3 install django #安装rabbitmq连接模块 pip3 install pika pip3 install paramiko pip3 install ipython pip ...
- LeetCode282. Expression Add Operators
Given a string that contains only digits 0-9 and a target value, return all possibilities to add bin ...
- Kubernetes 概述和搭建(多节点)
一.Kubernetes整体概述和架构 Kubernetes是什么 Kubernetes是一个轻便的和可扩展的开源平台,用于管理容器化应用和服务.通过Kubernetes能够进行应用的自动化部署和扩缩 ...
- CCF CSP 201609-3 炉石传说
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201609-3 炉石传说 问题描述 <炉石传说:魔兽英雄传>(Hearthston ...