E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
better-scroll
饿了么Vue2.0与
better-scroll
结合的使用
首先安装better-scrollnpmibetter-scroll-Sgoods页面模板0"class="icon":class="classMap[item.type]">{{item.name}}{{item.name}}{{food.name}}{{food.description}}月售{{food.sellCount}}份好评率{{food.rating}}%¥{{food.price
keji_123
·
2020-08-13 15:39
vue2-0
vue实现menu之间的联动,用到
better-scroll
计算右侧商品栏每个类别商品的总高度,将他们存入一个数组,左侧的菜单栏每个分类的索引取自这个数组,比如左侧index为0的时候,对应展示右侧的是第一个分类的商品,index为1时,对应展示右侧的是第二个分类的商品,根据
better-scroll
honey_seve7n
·
2020-08-13 14:04
vue
vue和
better-scroll
实现列表左右联动效果
一.实现思路(1)实现上是左右分别一个
better-scroll
列表(2)利用计算右侧列表每一个大区块的高度来计算左侧的位置二.实现1.实现左右两个
better-scroll
(1)dom结构(
better-scroll
guxiansheng1991
·
2020-08-13 14:01
vue
better-scroll
使用
文档地址:https://ustbhuangyi.github.io/
better-scroll
/doc/zh-hans/结合vue的学习:https://zhuanlan.zhihu.com/p/27407024
guxiansheng1991
·
2020-08-13 14:01
vue
Vue中使用
better-scroll
实现左右菜单联动效果
效果图 左图是完全图,右图制作时颜色没弄上(制作软件的问题)下载better-scrollnpminstallbetter-scroll--save注意:必须包含两个大的div,外层和内层div外层div设置可视的大小(宽或者高)-有限制宽或高内层div,包裹整个可以滚动的部分内层div高度一定大于外层div的宽或高,才能滚动必须在获取数据和DOM渲染完之后再调用定义的initScroll(
什_么
·
2020-08-13 14:14
Better-scroll
better-scroll
:实现菜单和内容联动的效果
1、基本使用Document*{margin:0;padding:0;border:0;outline:none;font-family:Arial;list-style:none;-webkit-font-smoothing:antialiased;}html,body,#app{height:100%;}#app{padding:20px0;box-sizing:border-box;}.wr
水中蒹葭
·
2020-08-13 13:30
vue2.0高仿饿了么
better-scroll
首先安装better-scrollnpmibetter-scroll-Sgoods页面模板0"class="icon":class="classMap[item.type]">{{item.name}}{{item.name}}{{food.name}}{{food.description}}月售{{food.sellCount}}份好评率{{food.rating}}%¥{{food.price
alhivlhos222178181
·
2020-08-13 13:01
用
better-scroll
来解决ios中html5页面fixed布局不兼容问题的处理
这里需要用到
better-scroll
插件。首先,来看一下页面:html布局顶部导航fixed部分{{item.name}}中间滑动fixe
雪莲的博客
·
2020-08-13 12:46
我的随记
better-scroll
无法滚动问题
无法滚动的时候打印一下scroll对象,看看里面的wrapperHeight是否小于scrollerHeight,如果不小于是不能滚动的,因为hasVerticalScroll表示是否有垂直滚动,如果不小于,那么hasVerticalScroll就是false,所以无法滚动。class为recommend的元素是scroll元素的父元素,它要固定高度为wrapperHeight的高度,如果没有这个
XiaoHuangDiLHD
·
2020-08-13 12:26
javascript
vue利用
better-scroll
实现通讯录式列表滚动和左右联动效果(2)
3.右边字母列表滑动或者点击时对应的字母高亮_calculateHeight(){this.listHeight=[]constlist=this.$refs.listgroupletheight=0this.listHeight.push(height)for(leti=0;i{this._calculateHeight()},20)},scrollY(newY){constlistHeight
XiaoHuangDiLHD
·
2020-08-13 12:55
javascript
vue
vue利用
better-scroll
实现通讯录式列表滚动和左右联动效果(1)
1.点击右侧字母,滚动到相应的列表位置首先在右侧字母列表监听touchstart事件,当事件发生时则执行相应的函数函数内容onShortCutTouchStart(e){letanchorIndex=getData(e.target,'index')this.touch.anchorIndex=anchorIndexthis.$refs.listview.scrollToElement(this.
XiaoHuangDiLHD
·
2020-08-13 12:55
vue
javascript
vue使用
better-scroll
的参数和方法
格式:varobj=newBScroll(object,{[option1,],.,.});注意:1、要确保object元素的高度比其父元素高2、使用时,一定要确保object所在的dom渲染后,再用上面的语句,或者obj.refresh()Options参数startX:0开始的X轴位置startY:0开始的Y轴位置scrollY:true滚动方向为Y轴scrollX:true滚动方向为X轴cl
初雪日
·
2020-08-13 12:14
js模块化
js
在cube ui中使用
better-scroll
自定义下拉刷新和上拉加载内容
在这次写项目中,偶然看到cube-ui组件库,看到这个ui组件库滚动盒子都是根据
better-scroll
封装的,在移动端上滑动效果体验比较不错,于是我决定使用cube-ui组件库,在使用过程中,在自定义下拉刷新中出错
雨季~~
·
2020-08-13 12:36
better-scroll
实现菜单和列表滚动效果联动。
上一篇中,我们使用
better-scroll
实现了列表滚动效果,但是并没有与菜单栏关联起来,这里我们就实现左右联动功能。
SilenceJude
·
2020-08-13 12:38
Vue开发
better-scroll
滚动不了的问题
今天有空尝试用了
better-scroll
组件来写slider,谁知道遇到一个很坑的一个东西。
Seety_ST
·
2020-08-13 12:33
vue
vue2.0
better-scroll
左右联动
在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天我们就使用vue2.0和
better-scroll
这个插件一起实现左右联动效果。
微光时空
·
2020-08-13 12:12
vue案例
vue - 浅谈
better-scroll
的使用及注意事项
一、
better-scroll
的使用1、安装npminstallbetter-scroll-S2、使用0"class="icon":class="classMap[item.type]">{{item.name
紫菀檀ss
·
2020-08-13 12:59
vue
better-scroll
踩坑事件记录
自打用了
better-scroll
插件,就遇到无数的坑,基本是无法滚动。前一个vue项目的滚动还带卡顿,给我的印象实在不好啊。(开始对它有阴影了)所以在这个项目开始时就格外注意这个插件的使用。
Phomtom
·
2020-08-13 11:23
当
better-scroll
遇上vue,不一样的坑
在度娘里找到了
better-scroll
,参照
better-scroll
的demo,实现了一个scroll组件scroll组件html{{noMoreTxt}}{{pullupTxt}}{{pulldowmTxt
Doniet
·
2020-08-13 11:26
web前端
vue 项目用
better-scroll
实现楼层滚动
better-scrollnpminstallbetter-scroll--save完整的代码我是滚动1{{item}}{{item}}点击-->import{mapState}from"vuex";importBScrollfrom"
better-scroll
面壁思过程
·
2020-08-13 11:56
vue
vue.js学习之 如何在
better-scroll
加载完成后,自动滚动到最底部
首先我们需要使用scrollTo这个方法:scrollTo(x,y,time,easing)参数:{Number}x横轴坐标(单位px){Number}y纵轴坐标(单位px){Number}time滚动动画执行的时长(单位ms){Object}easing缓动函数,一般不建议修改,如果想修改,参考源码中的ease.js里的写法为了组件的复用性,我们需要在scroll组件的props添加一个flag
weixin_34378045
·
2020-08-13 11:53
javascript
better-scroll
遇到的问题 1
备注:
better-scroll
实现下拉,是父子层的结构,父层的第一个子元素,如果超出父容器,那么就可以实现下拉问题:今天在使用
better-scroll
实现下拉功能,遇到了一个问题"有时候不能下拉到底部
weixin_33897722
·
2020-08-13 11:13
关于
better-scroll
小问题
今天在用黄毅老师的better-scorll插件的时候碰到一个小问题,发现页面无法上下滚动,我花了一点时间去翻阅了api和审查绑定元素,发现代码应该没问题,然后我在控制台输出了绑定的scroll对象眼睛直接扫到了hasVerticalScroll这个key,哈哈,这不是‘是否有垂直滚动’的键吗,于是我在浏览器端直接将‘false’改成了‘true’,果然可以直接滚动,但是只能拖拽(因为高度不够,强
wcq_work1995
·
2020-08-13 11:21
【vue】
better-scroll
高度不够时遇到的问题
前言前段时间在开发时,需要实现手机端的流畅滑动,最开始直接用的是mint-ui,但是中途发现了一些问题,后来发现了
better-scroll
,简单用了一下,发现效果还不错,但也是遇到了一些小问题…先附上
Lucifer_23333
·
2020-08-13 10:37
better-scroll
左右联动
{{item.letter}}{{iitem}}{{item.letter}}.box{background-color:#222;}.tab{height:44px;}.letter{background-color:#ddd;}.wrapBox{position:fixed;top:44px;bottom:0;width:100%;overflow:hidden;}.content-box{p
honghong.zhou
·
2020-08-13 10:34
vue+element
better-scroll
无法滚动的问题
更新于2018/11/05更新内容:无法响应鼠标滚轮滚动。解决办法:添加属性mouseWheel:true。原因:默认是支持移动设备的,手机没鼠标更没滚轮。过程:我竟然连鼠标拖动可以滚动也没发现,以前滚轮无法滚动竟然也没发现过。----------------------------------人造分割线-------------------------------------总结一下目前为止碰到
Bailiwuyi
·
2020-08-13 10:56
前端
使用vue做的音乐播放器crabMusic(接口用的网易云音乐)
主要技术:使用Vue.js实现单页应用使用vue-router处理路由使用axios请求数据使用vue-lazyload对图片进行懒加载使用
better-scroll
制作轮播图,(加载更多等后续更新..
风雨季
·
2020-08-12 17:00
vue
Vue
Better-Scroll
横向滚动失效,解决方法及心得
VueBetter-Scroll横向滚动失效,解决方法及心得菜鸟之言,请多指教1.Better-Scroll滚动原理中文文档地址:点我有时中文文档地址会短暂失效,尚不明确什么原因,请多次刷新或者稍后重试在一个容器内,让内部第一个元素超出滚动。外部容器(wrapper容器)超出隐藏,即:overflow:hidden外部容器需定义宽度或高度(因为内部容器超过外部容器才能滚动)内部容器需定义高度或宽度
vagg13
·
2020-08-10 11:07
vue
Vue实现 兄弟组件间的联动效果
一、实现的效果点击右侧的字母,左侧的城市列表也会随之变化字母所对应的区域;在右侧字母区域进行滚动,左侧的城市列表也会随之滚动到字母所对应的区域;二、所用的插件
better-scroll
插件:https:
小敏同学
·
2020-08-09 08:28
使用vue2+Vuex+Router重写饿了么点餐系统和vue插件简析
开发了高仿饿了么点餐系统来练练手,不得不说vue真是一个很不错的框架,但是也遇到过一些坑,在这里和大家分享一下饿了么点餐系统vue2.0、vuex、vue-router、axios、webpack、eslint、
better-scroll
weixin_34219944
·
2020-08-09 00:25
input 输入框 光标错位问题 、移动端输入框/input框光标错位问题、微信H5输入框/input框光标错位问题
建议用
better-scroll
,或者用absolut
小龙爱吃虾
·
2020-08-08 22:02
input
vue项目笔记(16)-vue滚动插件
better-scroll
的使用
vue滚动插件
better-scroll
的使用在移动端或APP中,我们经常遇到页面中的部分元素需要滚动的情况,这个时候我们就可能需要使用vue插件
better-scroll
,该插件的使用步骤如下:1、安装
ZYN5431
·
2020-08-08 20:31
Vue
插件
Vue.js 常用插件
better-scroll
:移动端非常好用的滚动组件npminstall--savebetter-scrollaxios:Vue官方推荐网络请求框架npminstallaxiosfastclick:解决移动端的点击延迟问题
Micah_A
·
2020-08-08 17:33
Vue.js
better-scroll
之吸顶效果巨坑挣扎中
今天和大家分享下
better-scroll
这款移动端用来解决各种滚动需求的插件(目前已经支持PC)关于其中的API大家可以去官网看下这里就给大家介绍几种常用的以及需要注意的点是什么首先说一下
better-scroll
dengweihuan4949
·
2020-08-08 15:05
vue项目使用
better-scroll
实现移动端上拉加载更多、下拉刷新效果,并进行封装处理
1.封装的组件MyScrollMore.vue代码如下:importBScrollfrom'
better-scroll
'exportdefault{props:{/***1滚动的时候会派发scroll事件
summer_my_sunshine
·
2020-08-07 18:09
better-scroll
实现列表联动(移动端)
这时候会用到一个常用的插件:
better-scroll
,利用它来实现移动端的滚动。
施天琦
·
2020-08-05 17:52
better-scroll
的用法
better-scroll
是种手机App中使用的滑动插件。下载方法不说了,和其他插件下载方式相同。
施天琦
·
2020-08-05 17:20
vue 移动端项目,动态控制div距离底部的距离
因为这个高度不是固定的,所以需要让上面的div距离底部的就需要是动态计算出来)我已阅读:《{{item.title}}》{{productInfo.premium}}立即投保importBScrollfrom'
better-scroll
'importurlsfrom
weixin_30737363
·
2020-08-05 17:35
vue实现横向滚动效果(
better-scroll
)
使用
better-scroll
实现滚动效果,参照大佬的文章,将
better-scroll
封装成组件可供多次调用。
tjzc1352640
·
2020-08-05 11:02
前端学习
better-scroll
切换栏吸顶效果
图片加载完成后,通过ref来获取组件距离父元素顶部的高度,通过监听滚动事件,把滚动y坐标和组件距离父元素顶部的距离比较,找到吸顶的临界值暴露了问题:(1)在
better-scroll
里使用position
神奇大叔
·
2020-08-04 21:56
通用功能
vue
解决
better-scroll
和keep-alive使用产生的无法保持之前滑动位置bug
解决思路(1)使用当有keep-alive的两个生命周期函数,activated和deactivated(2)当离开页面时,记录最后的滑动位置(3)当进入页面时,滑动到记录的滑动位置并刷新scroll来重新计算一下滑动位置代码示例:activated(){//activated时,dom还未加载完成if(this.$refs.scrolls.scroll!=null){//通过ref获取到滑动组件
神奇大叔
·
2020-08-04 21:25
我有神奇组件模板
我有疑难BUG仓库
vue
Vue项目 ---
better-scroll
安装npminstallbetter-scroll--save使用importBscrollfrom'
better-scroll
'exportdefault{props:{letter:String},
V火力全开
·
2020-08-01 13:36
better-scroll
封装具有上拉加载、下拉刷新等组件(Vue)
上拉加载在该组件标签上自定义@loadRefresh='x',@loadMore='x'函数,作为下拉加载、上拉刷新回调函数回到顶部自定义临界值具体配置看代码注释代码示例:↑importBScrollfrom'
better-scroll
'exportdefault
神奇大叔
·
2020-08-01 05:51
我有神奇组件模板
vue
详解vue之
better-scroll
实现轮播图和页面滚动
(该方法只针对移动端使用效果较好,PC端不推荐,使用的版本是
[email protected]
,其他版本会出错)1.安装
better-scroll
在根目录中package.json的dependencies
小皮咖
·
2020-08-01 05:56
vue
react项目使用
better-scroll
笔记
1、安装yarnaddbetter-scroll2、引用importBScrollfrom'
better-scroll
'3、请求完数据后初始化componentDidMount(){const{dispatch
开心就好1314520
·
2020-07-31 22:42
vue结合
better-scroll
实现商品详情联动效果
文章目录
better-scroll
效果图安装better-scrolltemplate使用better-scrollstyle滑动元素吸顶.可参考效果图安装
better-scroll
安装:npmibetter-scroll-S
Smile_ping
·
2020-07-31 14:10
vue
当
better-scroll
遇见 Vue
我们在实现这类滚动功能的时候,会用到我写的第三方库,
better-scroll
。什么是better-scrollbetter-scroll是一个移动端滚动的解决方案,它
weixin_33812433
·
2020-07-30 20:48
better-scroll
插件初使用
模仿了一个饿了吗页面先上图,看一看
better-scroll
的效果如果用overflow:auto或scroll属性,这样的页面就会出现两个滚动条,用户体验会有折扣,所以给介绍一款插件
better-scroll
llx18042693031
·
2020-07-30 19:54
web前端
Vue写商城类hybrid-app遇到的bug以及解决办法
1.实现页面之间的切换效果参考这个项目:https://github.com/zhengguorong/pageAinimate2.ios页面的滚动效果(两种解决办法)使用
better-scroll
插件我们当时使用它时
幸运人1
·
2020-07-30 15:31
web前端
bug大集
外卖项目中1.商品列表页中,使用
better-scroll
实现滚动菜单,,出现报错“Failedtoresolvedirective:el”错误原因:这是因为v-el在vue2.x以后被淘汰。
Guan ri
·
2020-07-29 12:57
上一页
2
3
4
5
6
7
8
9
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他