码迷,mamicode.com
首页 > 其他好文 > 详细

vue结合 better-scroll 下拉加载问题

时间:2018-07-04 16:46:59      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:scrollto   内容   参数配置   研究   cto   init   console   pos   import   

源码:https://github.com/LY-u/vue_better-scroll
封装scroll.vue组件, 在组件内加载:
import BScroll from better-scroll
组件内容:参考:https://github.com/LY-u/vue_better-scroll/blob/master/src/components/page.vue

封装好的scroll.vue在项目中使用:
import BScroll from better-scroll
import scroll from @/components/scroll

注意事项:先引入better-scroll 组件 在引入scroll,期中BScroll组件不要再模板里调用

components:{scroll}

APP.vue使用 scroll组件

<scroll class="wrap"
          ref=scrollEle
          :pulldown="true"
          :listenScroll=true
          :pullDownRefresh="pullDownRefreshObj"
          @pulldown="loadData"
          @scroll=scroll></scroll>


<script>
export default{
computed:{
        pullDownRefreshObj(){
        // 下拉刷新配置
        return {
            threshold: 60,
            stop: 50,
            stopTime:1000
        }
      },
    },

//这里具体参数配置  参考官方文档 http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api-specific.html  具体我也不太明白,我也是参考这里一步一步写的,

methods:{
 loadData(){
         setTimeout(()=>{
          this.finishPullDown().then(res=>{
            console.log(refresh)
            })
          },1000)
        },
    scroll(pos){
      //监听滚动
        let y = -pos.y
        // alert(y)
        },
    scrollTo(y) {
      return new Promise((resolve)=>{
        this.$refs.scrollEle.scrollTo(0, -y, 500, bounce)
        resolve()
      })
    },
    scrollToElement(){
      let el = document.querySelector(.to)
      this.$refs.scrollEle.scrollToElement(el,700)
    },
    finishPullDown() {
      return this.$refs.scrollEle.finishPullDown()
    },
    initScroll() {
      let s = this.$refs.scrollEle.scroll
      if(s){
        return this.refreshScroll()
      }else{
        return this.$refs.scrollEle._initScroll()
      }
    },
    refreshScroll() {
      return this.$refs.scrollEle.refresh()
    },
    },
},
mounted() {
       //初始化滚动条 
      this.initScroll() 
    },
}
</script>

<style>
.wrap{
//滚动条高度初始化
  width: 100%;
  height: 100%;
  overflow:hidden;
}
</style>

//写到这里,其实还有一个坑,不能实现滚动,怎么解决了? 终于研究了半天,一个代码一个代码的去参考:https://github.com/LY-u/vue_better-scroll/tree/master/src/components

  最终自己也无奈了,解决办法就是在
<scroll class="wrap"
          ref=scrollEle
          :pulldown="true"
          :listenScroll=true
          :pullDownRefresh="pullDownRefreshObj"
          @pulldown="loadData"
          @scroll=scroll>
<div></div>
</scroll>

注意里面的所有数据都要放在div里面  ,然后滚动条就出来了。

 

vue结合 better-scroll 下拉加载问题

标签:scrollto   内容   参数配置   研究   cto   init   console   pos   import   

原文地址:https://www.cnblogs.com/hxp87/p/9263884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!