better-scroll

VScroll.vue 

作为子组件（也可叫做公共组件）。这里用插槽。不用props .props 父传子传数据，子代VScroll拿到数据，但是VScorll里面的滚动内容确实不定。（数据不定最关键是样式不定也叫不统一）。于是用插槽，插槽：父组件直接传html结构。在外面处理好再传递进来给子组件展示。

props:子组件比如同一个title组件，只是title文字不一样，其他样式都一样，用props是最合适的。但是样式都发生了巨大变化了呢。还是插槽

<template>
 <div class="wrapper" ref="wrapper">
     <!-- 默认插槽，使用该组件时用要滚动内容替换 -->
     <slot></slot>
 </div>
 
</template>

<script>
 //导入BScroll
 import BScroll from "better-scroll"
export default {
 name:"VScroll",
 data() {
   return {
     scroll:null
   }
 }, 
 mounted() {

    //创建BScroll对象并设置参数

   this.scroll = new BScroll(this.$refs.wrapper,{

     mouseWheel: true,//开启鼠标滚轮

     disableMouse: false,//启用鼠标拖动

     disableTouch: false,//启用手指触摸

     scrollX: true,  //X轴滚动启用  

     click:false, //在浏览器模拟器中生效

     tap:'', //在真机中生效

     eventPassthrough: 'vertical',//设置该属性为vertical 则只会滚动设置为true的轴 实现效果是保留原生纵向滚动的能力

   })

   })
 },
}
</script>

<style scoped>
.wrapper{
  margin: 32px 0 40px;
}

</style>

 

使用

 <v-scroll class="wrapper">
       <!-- 下面的内容替换了默认插槽 -->
       <ul class="content">
         <li v-for="(item, index) in onlineServices" :key="index">
           <van-image width="7.5625rem" height="6.25rem" :src="item.icon" @click="$utils.goAction(item.code, $store.state.cityCode)"/>
         </li>
       </ul>
       
     </v-scroll>



 .wrapper {
    height: 200px;
    width: 710px;
    overflow: hidden;
  }
  .content {
    display: inline-flex;
    overflow: hidden;
    li {
      margin-right: 16px;
    }
  }