解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！

这两个插件我用过好几次，有时候很顺利，不顺利的时候真的很麻烦，一直无法滚动，明明style里已经有样式了，就是滚动不了。

先说下在vue里的三种的引入方式：

在index.html文件里通过script的方式引入进来，let iscroll = new IScroll(‘.wrapper’,{click:true}
<script type="text/javascript" src="src/assets/js/iscroll.js"></script>
使用import引入，let BScroll= new BScroll(‘.wrapper’,{click:true}

import BScroll from 'better-scroll'

在main.js将bettre-scroll引入进来，然后Vue.prototype.BScroll=BScroll,然后在使用的地方，letBScroll=newthis.BScroll=BScroll,然后在使用的地方，letBScroll=newthis.BScroll = BScroll, 然后在使用的地方，let BScroll= new this.BScroll(‘.wrapper’,{click:true});
这种比较方便就是只需在main.js里import一次，如果是第二种的话，需要在使用的每个组件都import一次

html：

    <mast v-show="mastspecificat" :class="{'network':mastspecificat}" @touchmove.prevent><div class="mast-specificat-list-scroll mast-scrollspecificat"><div class="mast-specificat-list" :class="{'mast-specificat-list-height':mastspecificat}"><div class="mast-specificat-product" v-if="specifications.active === 't' ? true : false" v-for="(specifications,index) in product.specs"> //循环的列表</div></div></div></mast>

重点css，需要滚动的容器不能设置高度，如下.mast-specificat-list这个滚动容器不要设置高度，我是设置高度后一直不能滚动，另外滚动的容器的子元素如果有浮动，父元素一定要清除浮动，另外当左右两边都有滚动的时候，不能用浮动，需要用绝对定位，否则滚动会导致布局乱了：

    .mast-specificat-list-scroll{height: 150px;overflow: hidden;}.mast-specificat-list{/*height: 210px;*//*overflow: auto;*/-webkit-overflow-scrolling:touch;}

因为html比较多，看着比较乱，html只需看css这两个类，符合官网的html结构即可

如果是异步获取数据后，需要在异步成功后进行初始化，例如：

show_category: function () {this.API.show_category().then((response) => {this.categorys = response;if(response.length > 0){this.get_product(response[0]['display_name'],response[0]['id']);}else{this.$store.state.mastloadding = false;mui.toast('没有查询到商品分类');}//拿到数据，并赋值后（需要进行监听数据的变化），进行初始化let categorysscroll = new BScroll('.menu-content-slider',{scrollY: true,click: true});         }, (response) => {mui.toast('网络错误');});}

需要注意下v-if和v-show,如果局部滚动的容器是通过v-if显示的，有可能会出现初始化的时候找不到DOM，使用v-show即可

使用iscroll后，子元素点击事件会触发两次，可以如下解决：

//屏蔽掉click事件，自定义tap事件
let menuscroll = new BScroll('.mast-cart-content-parent',{scrollY: true,// click: truetap:"set_cart,changeMastDisplay"
});

<span class="confirm-product-price" @tap="changeMastDisplay({'name':'mastflavour','product':product})"></span>
<span class="menu-product-reduce" @tap="set_cart(product,{handle:1})"></span>

解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！相关推荐

解决vue项目中@mousemove 事件子元素触发了父元素事件
在Vue项目中使用@mousemove事件从$event中获取x与y轴时 , 如果绑定此事件的元素内还有别的子元素那么同样会触发mousemove事件 , 但是$event.target会是这个子元素 ...
解决Vue中的生命周期beforeDestory不触发的问题（用了keep-alive）
原因:给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory. vue项目中,在页面中使用了定时器.正常情况下,我们在生命周期 beforeDesto ...
android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...
应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
解决vue项目路由出现message: “Navigating to current location (XXX) is not allowed“的问题(点击多次跳转)
解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题(点击多次跳转) 参考文章: ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局页面内容在对应的组件的最外层div上加上这样的样式: .conten ...
解决PDF阅读器手型工具里有个箭头点击文档出现页面放大问题
解决PDF阅读器手型工具里有个箭头点击文档出现页面放大问题打开某些PDF文档,手形工具里还有一个箭头,若点击文档正文的任意部位,文档就会变大,可按以下操作取消 1.以福昕阅读器为例,操作是:文件 ...
解决vue下使用fastclick导致ios端需要点击2下才能触发click的问题
在vue里添加了fastclick来处理移动端点击延迟的问题,但是在mac上使用的时候,发现click事件需要点击2下才能触发点击事件. import fastclick from 'fastclic ...

解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！

这两个插件我用过好几次，有时候很顺利，不顺利的时候真的很麻烦，一直无法滚动，明明style里已经有样式了，就是滚动不了。

先说下在vue里的三种的引入方式：

html：

如果是异步获取数据后，需要在异步成功后进行初始化，例如：

需要注意下v-if和v-show,如果局部滚动的容器是通过v-if显示的，有可能会出现初始化的时候找不到DOM，使用v-show即可

使用iscroll后，子元素点击事件会触发两次，可以如下解决：

解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！相关推荐

最新文章

热门文章