vue-better-scroll 的使用实例代码详解

首先安装better-scroll

npm i better-scroll -S

goods页面模板

<template> <div class="goods">  <div class="menu-wrapper" ref="menuWrapper">   <ul>    <li v-for="item in goods" class="menu-item">     <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="foods-wrapper" ref="foodsWrapper">   <ul>    <li v-for="item in goods" >     <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" alt="" width="57" height="57">       </div>       <div class="content">        <h2 class="name">{{food.name}}</h2>        <p class="desc">{{food.description}}</p>        <div class="extra">         <span class="food-number">月售{{food.sellCount}}份</span>         <span>好评率{{food.rating}}%</span>        </div>        <div class="price">         <span class="nowPrice">￥{{food.price}}</span>         <span class="oldPrice">￥{{food.oldPrice}}</span>        </div>       </div>      </li>     </ul>    </li>   </ul>  </div> </div></template>

js

<script type="text/ecmascript-6"> /* 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,{});  } }}</script>

先用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 结构：

<div class="wrapper"> <ul class="content">    <li></li>   <li></li>    <li></li>   <li></li>  </ul></div>