vue.js2.0 实现better-scroll的滚动效果实例详解
作者:至情相遇 发布时间:2023-07-02 16:58:50
标签:vue,better,scrol
什么是 better-scroll
better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
<template>
<div>
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper">
</div>
<div class="food-wrapper" ref="foodWrapper">
</div>
</div>
</div>
</template>
与1.0版本不同的是,我们使用的是ref
<script type="text/ecmascript-6">
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});
}
}
};
</script>
很简单这样页面就可以滚动了,如下图
但是,这样左右两个页面并没有联动起来,需要我们再定义一个方法来计算滚动的高度,以及在计算属性中计算左侧当前索引在哪里
从而定义左侧边栏的位置
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);
}
至此,整个联动实现的,完整代码如下
<template>
<div>
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
<span class="text border-1px">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
</span>
</li>
</ul>
</div>
<div class="food-wrapper" ref="foodWrapper">
<ul>
<li v-for="(item,index) in goods" class="food-list food-list-hook">
<h1 class="title">{{item.name}}</h1>
<ul>
<li v-for="food in item.foods" class="food-item border-1px">
<div class="icon">
<img :src="food.icon" width="57" height="57" alt="">
</div>
<div class="content">
<h2 class="name">{{food.name}}</h2>
<p class="desc">{{food.description}}</p>
<div class="extra">
<span class="count">月售{{food.sellCount}}份</span>
<span>好评率{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
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);
}
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@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)
</style>
总结
以上所述是小编给大家介绍的vue.js2.0 实现better-scroll的滚动效果实例详解网站的支持!
来源:https://blog.csdn.net/qq_33022911/article/details/81607165
0
投稿
猜你喜欢
- socket文件:当用Unix域套接字方式进行连接时需要的文件。pid文件:MySQL实例的进程ID文件。1.pid-file介绍MySQL
- 简介canvas 是HTML5 提供的一种新标签,它可以支持 JavaScript 在上面绘画,控制每一个像素,它经常被用来制作小游戏,接下
- 前言本文主要给大家介绍了关于Django中CBV和FBV的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。一、&n
- 一、什么是v-bind指令v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式。v-bind是应用在动态属性上面的
- 引言做接口测试的时候,避免不了操作数据库。因为数据校验需要,测试数据初始化需要、一些参数化场景需要等。数据库操作框架设计这里主要操作mysq
- 1. 打开Anaconda Prompt(在命令行格式下,输入代码,建立pytorch环境、安装pytorch、测试pytorch过程)2.
- 前言在最一开始,我的B站收藏一直是存放在默认收藏夹中,但是随着视频收藏的越来越多,没有分类的视频放在一起,想在众多视频中找到想要的视频非常困
- 本文实例分析了Go语言中关闭带缓冲区的频道。分享给大家供大家参考。具体分析如下:Go语言提供了两种频道,带缓冲区和不带缓冲区的。不带缓冲区的
- 当您使用FILESYSTEMOBJECT(fso)对象获得某个目录下的文件列表的时候,你有没有发现无法控制它们的排序方式,比如按照名字排序,
- 背景说明:10 * time.Second //正常数字相乘没错但是package mainimport "time"f
- 中间件是什么?中间件是类似flask函数中钩子函数的东西。可以在请求视图函数前,或者视图函数响应后处理某些事情。中间件对全部视图都有效!中间
- 本文主要分享的是一则关于Tornado高并发处理方法的实例,具体如下:#!/bin/env python# -*- coding:utf-8
- 前一段时间完成了一个数据可视化项目,由后台NodeJS+Highcharts框架进行搭建。下面分享一下整个开发过程的流程,以及使用Highc
- 内部存储格式:世纪、年、月、日、小时、分钟、秒默认格式是:DD-MON-RR。SYSDATE 返回当前的系统时间。SELECT S
- 介绍公司以前的一个exe包,我们需要查看里面python源码,但是以前的py源码文件找不到,所以只能反编译,介绍一下反编译的过程。首先准备:
- 假设mysql 安装在c:盘,mysql数据库的用户名是root,密码是123456,数据库名是database_name,在d:盘根目录下
- 一个JavaScript代码编写的图片展示特效,效果很棒。效果图:演示:<!DOCTYPE HTML PUBLIC "-//
- 本文实例为大家分享了js选项卡切换的具体代码,可以手动切换,另设置定时器可使其自动切换,供大家参考,具体内容如下效果如图:具体代码:<
- 我就废话不多说了,大家还是直接看代码吧~import numpy as np kernel = np.array([1, 1, 1, 2])
- 在看论文《Detecting Regions of Maximal Divergence for Spatio-Temporal Anoma