美文网首页
vue移动端之 better-scroll(pc端通用)超出部分

vue移动端之 better-scroll(pc端通用)超出部分

作者: 风中凌乱的男子 | 来源:发表于2018-10-11 11:33 被阅读0次

废话不多说,用到

better-scroll 插件 (点击可进入gitup官方文档)

直接上代码案例

举个例子:

 京东分类页,美团店铺详情页都有用到此需求

<div class="goods">

       <!-- 分类列表 -->

<div class="menu-wrapper" ref="menuScroll"> 

//ref 意思是做一个标记,下面的方法可以找到这个元素 用this.$refs.menuScroll 来找到他

    <ul>

        <li>

        分类1

        </li>

         <li>

        分类2

        </li>

        ....

</div>

//首先npm 装上 better-scroll ,命令是  npm install better-scroll --save

//然后在要引用的页面 import BScroll from 'better-scroll'

//在然后在methods 方法中写入

methods:{

    initScroll(){   

      new BScroll(this.$refs.menuScroll)    //实例化    用this.$refs.menuScroll 来找到要滚动的元素

      }

  },

//在然后在ajax获取请求成功的回调函数内 执行滚动方法

created(){

    axios.get('/api/goods')

    .then((res) => {

      this.menu_list = res.data.container_operation_source

      this.goods = res.data.food_spu_tags

      this.initScroll()   //执行滚动方法 。

        或者 

    this.$nextTick(()=>{
     this.initScroll()

)

    }).catch((err) => {

      console.log(err)

    });

  }

搞定!!!!

相关文章

网友评论

      本文标题:vue移动端之 better-scroll(pc端通用)超出部分

      本文链接:https://www.haomeiwen.com/subject/ukxbaftx.html