028-86922220
关于创新互联
多方位宣传企业产品与服务 突出企业形象
vue.js2.0如何实现better-scroll的滚动效果-创新互联
这篇文章主要介绍vue.js2.0如何实现better-scroll的滚动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联从2013年成立，我们提供高端网站建设、
小程序制作、电商视觉设计、
app软件开发公司及网络营销搜索优化服务，在传统互联网与移动互联网发展的背景下，我们坚守着用标准的设计方案与技术开发实力作基础，以企业及品牌的互联网商业目标为核心，为客户打造具商业价值与用户体验的互联网+产品。
什么是 better-scroll
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。
与1.0版本不同的是,我们使用的是ref
import BScroll from "better-scroll";
export default {
data(){
return {
currentIndex:1,
goods:[]
}
},
created(){
this.classMap=['decrease','discount','special','invoice','guarantee'];
this.$http.get('/api/goods').then((response)=>{
response=response.body;
if (response.errno===ERR_OK) {
this.goods=response.data;
}
//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
this.$nextTick(()=>{
this._initScroll();
});
});
},
methods:{
_initScroll(){
// 使用better-scroll实现的关键代码
this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
this.foodScroll=new BScroll(this.$refs.foodWrapper,{click:true});
}
}
};
很简单这样页面就可以滚动了,如下图
但是,这样左右两个页面并没有联动起来,需要我们再定义一个方法来计算滚动的高度,以及在计算属性中计算左侧当前索引在哪里
从而定义左侧边栏的位置
computed:{
//用来计算左侧当前索引在哪，从而定位到左侧边栏的位置
currentIndex(){
for (let i = 0; i < this.listHeight.length; i++) {
var height1=this.listHeight[i] ;
var height2=this.listHeight[i+1];
if(!height2||(this.scrollY >= height1 && this.scrollY < height2)){
return i;
}
}
return 0;
}
},
methods:{
_initScroll(){
// 使用better-scroll实现的关键代码
this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
this.foodScroll=new BScroll(this.$refs.foodWrapper,{
click: true,
//探针作用，实时监测滚动位置
probeType: 3
});
this.foodScroll.on('scroll',(pos)=>{
this.scrollY=Math.abs(Math.round(pos.y))
});
},
_calculateHeight(){
let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
let height=0;
this.listHeight.push(height);
for (var i = 0; i < foodList.length; i++) {
let item=foodList[i];
height+=item.clientHeight;
this.listHeight.push(height);
}
}
}
//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
this.$nextTick(()=>{
this._initScroll();
this._calculateHeight();
});在dom渲染后,也是需要计算高度的.
滑动右边,实现左边联动已经实现了,接下来就是,点击左边的菜单,右边的食物相应滚动到具体的位置
给左边菜单绑定一个事件:@click="selectMenu(index,$event)"
/左边的菜单项的点击事件
selectMenu(index,event){
//自己默认派发事件时(BScroll),_constructed默认为true.但原生的浏览器并没有这个属性
if (!event._constructed) {
return;
}
//运用BScroll滚动到相应位置
//运用index去找到对应的右侧位置
let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
//滚动到相应的位置
let el=foodList[index];
//设置滚动时间
this.foodScroll.scrollToElement(el,2000);
}至此,整个联动实现的,完整代码如下
0" class="icon" :class="classMap[item.type]">{{item.name}}
{{item.name}}
{{food.name}}
{{food.description}}
月售{{food.sellCount}}份
好评率{{food.rating}}%
¥{{food.price}}¥{{food.oldPrice}}
import BScroll from "better-scroll";
const ERR_OK=0;
export default {
props:{
seller:{
type:Object
}
},
data(){
return {
goods:[],
listHeight:[],
scrollY:0
}
},
created(){
this.classMap=['decrease','discount','special','invoice','guarantee'];
this.$http.get('/api/goods').then((response)=>{
response=response.body;
if (response.errno===ERR_OK) {
this.goods=response.data;
}
//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
this.$nextTick(()=>{
this._initScroll();
this._calculateHeight();
});
});
},
computed:{
//用来计算左侧当前索引在哪，从而定位到左侧边栏的位置
currentIndex(){
for (let i = 0; i < this.listHeight.length; i++) {
var height1=this.listHeight[i] ;
var height2=this.listHeight[i+1];
if(!height2||(this.scrollY >= height1 && this.scrollY < height2)){
return i;
}
}
return 0;
}
},
methods:{
_initScroll(){
// 使用better-scroll实现的关键代码
this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
this.foodScroll=new BScroll(this.$refs.foodWrapper,{
click: true,
//探针作用，实时监测滚动位置
probeType: 3
});
this.foodScroll.on('scroll',(pos)=>{
this.scrollY=Math.abs(Math.round(pos.y))
});
},
_calculateHeight(){
let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
let height=0;
this.listHeight.push(height);
for (var i = 0; i < foodList.length; i++) {
let item=foodList[i];
height+=item.clientHeight;
this.listHeight.push(height);
}
},
//左边的菜单项的点击事件
selectMenu(index,event){
//自己默认派发事件时(BScroll),_constructed默认为true.但原生的浏览器并没有这个属性
if (!event._constructed) {
return;
}
//运用BScroll滚动到相应位置
//运用index去找到对应的右侧位置
let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
//滚动到相应的位置
let el=foodList[index];
//设置滚动时间
this.foodScroll.scrollToElement(el,2000);
}
}
};
@import "../../common/stylus/mixin.styl";
.goods
display:flex
position:absolute
top:174px
bottom:46px
width:100%
overflow:hidden
.menu-wrapper
flex:0 0 80px
width: 80px
background:#f3f5f7
.menu-item
display:table
height:54px
width:56px
padding:0 12px
line-height:14px
&.current
position:relative
z-index:10
margin-top:-1px
background:#fff
font-weight:700
.text
border-none()
.icon
display:inline-block
vertical-align:top
margin-right:2px
width:12px
height:12px
background-size:12px 12px
background-repeat:no-repeat
&.decrease
bg-image('decrease_3')
&.discount
bg-image('discount_3')
&.guarantee
bg-image('guarantee_3')
&.invoice
bg-image('invoice_3')
&.special
bg-image('special_3')
.text
display:table-cell
vertical-align:middle
width:56px
border-1px(rgba(7,17,27,0.1))
font-size:12px
.food-wrapper
flex:1
.title
padding-left:14px
font-size:12px
color:rgb(147,153,159)
height:26px
border-left:2px solid #d9dde1
line-height:26px
background:#f3f5f7
.food-item
display:flex
margin:18px
padding-bottom:18px
border-1px(rgba(7,17,27,0.1))
&:last-child
border-none()
margin-bottom:0
.icon
flex:0 0 57px
margin-right:10px
.content
flex:1
.name
margin:2px 0 8px 0
height:14px
line-height:14px
font-size:14px
color:rgb(7,17,27)
.desc,.extra
line-height:10px
font-size:10px
color:rgb(147,153,159)
.desc
margin-bottom:8px
line-height:12px
.extra
.count
margin-right:12px
.price
font-weight:700
line-height:24px
.now
margin-right:8px
font-size:14px
color:rgb(240,20,20)
.old
text-decoration:line-through
font-size:10px
color:rgb(147,153,159)
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
以上是“vue.js2.0如何实现better-scroll的滚动效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文名称：vue.js2.0如何实现better-scroll的滚动效果-创新互联
网站网址：http://kswsj.cn/article/dgphei.html
