vue滚动加载scroll,vue 滚动
水平滚动的功能是我们在日常开发中经常遇到的需求。下面这篇文章主要介绍如何使用Vue中的better-scroll组件实现水平滚动的相关信息。有需要的可以参考一下。
About
最近在学习vue的过程中，我仿照Qunar.com的移动端写了一个小项目，旨在练习和巩固基础知识。但是今天发现Qunar.com首页有一个用户体验很差的组件，就是浏览器原生滚动实现的一个横向列表，列表的滚动比较粗糙不舒服，于是决定用better-scroll重写这个组件。
better-scroll介绍
Better-scroll是一个基于黄易(是的，我的前辈)写的i-scroll的卷轴组件。项目地址是https://github.com/ustbhuangyi/better-scroll.
一、滚动的实现原理
better-scroll的滚动原理和浏览器原生滚动是一样的。当子框的高度大于父框的高度时，将发生垂直滚动：
同样，如果子框的宽度大于父框的宽度，那么就会有横向滚动(基本原理)。
二、在Vue中使用better-scroll
在Vue中使用better-scroll最需要注意的是，我们必须等到页面渲染完成后，才能实例化B-scroll。因为better-scroll要得到滚动区域的大小和父框的大小来计算是否可以滚动，所以我们必须对Vue的生命周期有一定的了解。
这里有一个小演示，通过它你将学会如何使用更好的滚动。
模板
class= wrapper ref= wrapper //在vue中获取dom元素最简单的方法就是使用这个。$参考文献
ul class=内容
里./李
里./李
.
/ul
/div
/模板
脚本
从“更好的滚动”导入滚动/导入更好的滚动
导出默认值{
已安装(){
这个。$nextTick(()={//使用这个。$ NextTick确保组件已经呈现。
this . scroll=new scroll(this。$ refs.wrapper，{ })//实例化bscroll需要两个参数，第一个是父框的dom节点。
})
}
}
/脚本
三、在Vue中实现横向滚动
1.效果图对比
使用原生滚动：
使用更好的滚动：
2.代码(请参见注释)
模板
div class=建议换行
div class=title
img class= title-img src= https://imgs.qunarzz.com/piano/fusion/1711/16/BFBB9874E8F11402.png alt=本周热门榜单
Class= title-hot rec 本周热门排行榜/span
完整列表/span
/div
Div ref=wrapper /* *这里是父框*/
Ul class=cont ref=cont /*这里是子框，也就是滚动区*/
Li class= cont-item v-for= item of recommended list :key= item . id
div class=cont-img
img class= img :src= item . URL :alt= item . text
/div
div class= cont-dest { { item . text } }/div
div class=控制价格
span class= price @{ { item . price } }/span
来自/span
/div
/李
/ul
/div
/div
/模板
脚本
从“更好的滚动”导入BScroll
导出默认值{
名称： HomeRecommand ，
道具：{
推荐列表：{
类型：数组，
必填：真
}
},
组件：{
},
data () {
返回{
}
},
方法：{
verScroll () {
let=this . recommended list . length * 110//动态计算滚动区域的大小。如前所述，滚动的原因是滚动区域的宽度大于父框的宽度。
这个。$ refs . cont . style . width=width px //修改滚动区的宽度
这个。$nextTick(()={
如果(！this.scroll) {
this.scroll=new BScroll(this。$refs.wrapper，{
StartX: 0，//配置详情请参考better-scroll的官方文档，在此不再赘述。
点击：真的，
没错，
错了，
eventPassthrough:“垂直”
})
}否则{
this.scroll.refresh() //如果数字正射影像图结构发生改变调用该方法
}
})
}
},
已安装(){
这个. nextTick(()={
设timer=setTimeout(()={ //其实我也不想写这个定时器的，这相当于又嵌套了一层$nextTick，但是不这么写会失败
如果(计时器){
清除超时（定时器)
this.verScroll()
}
}, 0)
})
}
}
/脚本
样式lang=scss 范围。建议-包装{
高度：0;
垫底：50%;
页边距-顶部：2雷姆；
背景：# fff
左填充：24r em
宽度：100%;标题{
位置：相对；
高度：40px
显示器：flex
填充：12px 0；
框大小：边框-框；标题-img {
宽度：15px
高度：15px
}。标题-hotrec {
字体大小：16px
左边距：4px
}。标题-allrec
位置：绝对；
填充-顶部：2px
字体大小：13px
右：20px
颜色：灰色；
}
}。续
列表样式：无；
//overflow-x:scroll；
空白：nowrap
字体大小：12px
文本对齐：居中；
填充-右：24雷姆；继续项目{
位置：相对；
显示：内嵌-块；
填充：06雷姆0 . 2雷姆
宽度：2雷姆；
边距：0 .一人民币；连续图像{
溢出：隐藏；
宽度：2雷姆；
高度：0;
底部填充：100%;img {
宽度：100%;
}
}。竞争目的地{
边距：1雷姆0；
}。竞争价格{。价格{
颜色：# ff8300
}
}
}
}
}
/风格
参考链接
作者：黄轶
链接：https://转蓝。胡志。com/p/27407024
总结
到此这篇关于某视频剪辑软件中利用更好的滚动组件实现横向滚动的文章就介绍到这了，更多相关最好-滚动横向滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。