Better Scroll+Vue、div的@click无效解决方法

better-scroll+Vue、div的@click无效解决方法

正常情况,div可以直接点击

<template><div><div @click="divClick()" style="height:50px; background:#69cfff;">div点击</div></div>
</template><script>
export default {name:"Profile",methods:{divClick(){console.log("divClick222");}}
}
</script><style scoped></style>

使用better-scroll的时候，需要在构造函数绑定click:true,div的@click才可以使用，而button不受影响，
因为使用了better-scroll，默认它会阻止touch事件

<template>
<div class="wrapper" ref="aaa"><!-- 1.当使用了Better Scroll 时，无论是否设置click:false,button都可以点击 --><button @click="btnClick">button点击</button><!-- 2.当使用了Better Scroll 时，必须设置click:true(new BScroll(...))，div才可以点击 --><div @click="divClick()" style="height:50px; background:#69cfff;">div点击</div><ul class="content"><button @click="btnClick">按钮</button><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li><li>lalal</li>
</ul>
</div></template><script>
// category使用better-scroll
import BScroll from 'better-scroll'
export default {name:"Category",// data(){//   return{//     scroll:null//   }// },//组件创建完成后调用// created(){//   this.scroll = new BScroll('.wrapper',{//   })// }mounted(){// console.log(document.querySelector('.wrapper'));// console.log(this.$refs.aaa);this.scroll = new BScroll(document.querySelector('.wrapper'),{probeType:3,pullUpLoad:true,click:true})this.scroll.on('scroll',(position) => {console.log(position);})this.scroll.on('pullingUp',() => {console.log('上哪加载更多');})// this.$nextTick(() => {//     this.scroll = new BScroll(this.$refs.aaa, {})//   })},methods:{btnClick(){console.log('btnclick');},divClick(){console.log("divClick");}}
}
</script><style scoped>
.wrapper{height: 80px;background-color: pink;overflow: hidden;/* overflow-y:scroll; */
}</style>

Better Scroll+Vue、div的@click无效解决方法相关推荐

chrome浏览器模拟手机端：jquery click()点击无效解决方法
chrome浏览器模拟手机端:jquery click()点击无效解决方法参考文章: (1)chrome浏览器模拟手机端:jquery click()点击无效解决方法 (2)https://www. ...
vue v-html 动态内容样式无效解决方法
vue v-html 动态内容样式无效解决方法参考文章: (1)vue v-html 动态内容样式无效解决方法 (2)https://www.cnblogs.com/mengfangui/p/122 ...
安卓 android:windowsoftinputmode,Android:windowSoftInputMode=＂adjustResize＂无效解决方法
Android:windowSoftInputMode=＂adjustResize＂无效解决方法时间:2018-08-16 来源:未知 Android开发中用到软键盘时会出现设置Activi ...
❤️关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法❤️
关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法 1.点击file打开设置settings,打开Editor找到 file and code templ ...
子div撑不开父div的几种解决方法
为什么80%的码农都做不了架构师?>>> 子div撑不开父div的情况: <style> .example{background: #008000;width: 400p ...
KEIL设置程序起始地址无效解决方法，STM32 IAP程序起始地址
关键词: KEIL设置程序起始地址无效解决方法 STM32 IAP设置程序起始地址 KEIL设置程序起始地址 MDK设置程序起始地址 KEIL设置ROM地址无效碰到的问题:为了实现STM32升级固件 ...
360极速浏览器显示https证书无效解决方法
关于360极速浏览器显示https证书无效解决方法,笔者在网上找了很多,网上的说法概括如下 1.日期不对,右下角调下系统日期 2.证书没导入,ie浏览器导入证书,具体的用搜索工具搜索下我现在要讲的可 ...
ubuntu (20.04 LTS) 屏幕亮度调节无效解决方法
ubuntu屏幕亮度调节无效解决方法问题描述尝试过的解决方法解决方法发现历程解决方法总结问题描述因为学习需要,在Win10系统的基础上安装了Ubuntu20.04 LTS 双系统,但 ...
抓浏览器请求时，下载SwitchyOmega提示：程序包无效解决方法
问题描述: 想要抓取浏览器请求时,需要下载一个SwitchyOmega的插件,进入下载网址:https://proxy-switchyomega.com/,点击本地下载时,提示:程序包无效解决方法: ...

Better Scroll+Vue、div的@click无效解决方法

better-scroll+Vue、div的@click无效解决方法

Better Scroll+Vue、div的@click无效解决方法相关推荐

最新文章

热门文章