<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轴滚动启用 scrollY:true, click:true, //在浏览器模拟器中生效 tap:true, //在真机中生效 // 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; } }