甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

vue-better-scroll怎么用

这篇文章将为大家详细讲解有关vue-better-scroll怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联建站2013年开创至今，先为晋城等服务建站，晋城等地企业，进行企业商务咨询服务。为晋城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

首先安装better-scroll

npm i better-scroll -S

goods页面模板

js


 /* eslint-disable*/
 
 import BScroll from 'better-scroll'
export default{

  props:{
    seller:{
      type:Object
    }
  },
 data(){
    return{
      goods:[]
    }
 },
 created(){
    this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee']
    this.$http.get('/api/goods').then((res)=>{
      this.goods=res.data.data;
      this.$nextTick(()=>{
       this._initScroll();
      })
     console.log(this.$refs.menuWrapper)


    })

 },
 methods:{
   _initScroll(){
     this.meunScroll=new BScroll(this.$refs.menuWrapper,{});
     this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
  }

 }
}

先用ref 绑定事件， 在vue中 用$ .refs注册

在钩子函数 create中 用vue-resource 请求数据，并异步调用方法

this.$nextTick(()=>{
       this._initScroll();
      }

   注册方法

_initScroll(){
     this.meunScroll=new BScroll(this.$refs.menuWrapper,{});
     this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
  }

better-scroll用法

我们先来看一下 better-scroll 常见的 html 结构：


  
   
  • 
   
  •  
   
  • 
   
  •  
 

    当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

     import BScroll from 'better-scroll'
 let wrapper = document.querySelector('.wrapper')
 let scroll = new BScroll(wrapper, {})

    better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数。

    better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。

    饿了么是这样处理的：

    mounted() {
  this.$nextTick(() => {
  this.scroll = new Bscroll(this.$refs.wrapper, {}) }) 
  }

    this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来
    如果不在下面的this.$nextTick()方法里回调这个方法，数据改变后再来计算滚动轴就会出错

    上拉刷新功能

    
    
      0">
      
       
       {{item.order_sn}}
       
       
       {{item.date}}
       
       
       ￥ {{item.partner_profit | number2}}
       
      
     
     
      
       
       
    {{loadingText}}
    
       
       
        
       
      
     
    
   
       mounted() {    // 设置wrapper的高度    this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px";    // better-scroll 的content高度不大于wrapper高度就不能滚动,这里的问题是,当一页数据的高度不够srapper的高度的时候,即使存在n页也不能下拉    // 需要设置content的min-height大于wrapper高度    this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";    this._initScroll();    this.getIncomeDetail(this.nextPage);    // 设置scroll的高度    // this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ;   },   methods:{   _initScroll() {     this.orderScroll = new BScroll(this.$refs.wrapper, {      probeType: 3,        click:true,      pullUpLoad: {  // 配置上啦加载       threshold: -80  //上拉80px的时候加载      },      mouseWheel: {  // pc端同样能滑动       speed: 20,       invert: false      },      useTransition:false, // 防止iphone微信滑动卡顿     });     // 上拉加载数据     this.orderScroll.on('pullingUp',()=>{      this.scrollFinish = false;      // 防止一次上拉触发两次事件,不要在ajax的请求数据完成事件中调用下面的finish方法,否则有可能一次上拉触发两次上拉事件      this.orderScroll.finishPullUp();      // 加载数据      this.getIncomeDetail(this.nextPage);     });    }

    关于“vue-better-scroll怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


    名称栏目：vue-better-scroll怎么用
    文章链接：http://chengdu.cdxwcx.cn/article/pgshep.html

    其他资讯