vue.js2.0 实现better-scroll的滚动效果实例详解


Posted in Javascript onAugust 13, 2018

什么是 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>

很简单这样页面就可以滚动了,如下图

vue.js2.0 实现better-scroll的滚动效果实例详解

但是,这样左右两个页面并没有联动起来,需要我们再定义一个方法来计算滚动的高度,以及在计算属性中计算左侧当前索引在哪里

从而定义左侧边栏的位置

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的滚动效果实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
javascript打开word文档的方法
Apr 16 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 #Javascript
Vue.js实现数据响应的方法
Aug 13 #Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 #Javascript
angular2实现统一的http请求头方法
Aug 13 #Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 #Javascript
You might like
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php生成shtml类用法实例
2014/12/09 PHP
php实现搜索类封装示例
2016/03/31 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
小学教师师德感言
2014/02/10 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
开学典礼决心书
2014/03/11 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android