
因为在IOS里面,页面滚动到底部后,还可以在往上拉,所以就禁止了body上的touchmove事件,现在里面的div如果有滚动条,也不能滚动咯,难道要自己去控制div的touchmove事件来控制translate移动,如果这样的话,又不流畅,如果用iscrolljs貌似问题也蛮多的。
最近写微信小程序做了一个评论的模态框组件,发现页面textarea 用catchtouchmove="true" 禁止滚动安卓机可以,但是苹果的不行,最后定位在textarea 这个标签能滚动的问题
解决办法:
添加 fixed="true" 就不会滚动了
在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面 *** 作与交互性;
<a name="gXpSi"></a>
1、小程序提供的下拉刷新(无法自定义刷新动画)
可能遇到的问题:
1)下拉时没有出现刷新的点点动画
可能是因为设置的页面背景色与点点动画一致导致无法看到动画,可以在页面配置中配置背景文字颜色:
2、scroll-view内refresher-enabled属性开启自定义刷新
基本库要求:2101
官方文档: scroll-view
3、原始scroll-view自定义下拉实现(为兼容2101一下的下拉刷新
通过监听手指移动距离控制需要下拉模块的下拉距离,主要事件bindtouchstart,bindtouchmove和bindtouchend,bindtouchmove记录手指开始下拉时的起始位置,bindtouchmove计算下拉距离,bindtouchend判断并实现刷新方法。
我的自定义下拉组件(Taro框架)
<a name="fEutw"></a>
1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新
页面配置 disabledScroll ,禁止页面滚动,同时页面内的列表滚动需要自己再优化调整;
2、scroll-view的scroll问题
需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……
3、页面下拉刷新结束后再滑动列表出现闪屏
在禁止页面橡皮筋效果后,如果页面内存在需滚动区域使用scroll-view效果比view更加流畅;
不设定固定高度不会发生闪屏但是页面滚动非常不流畅;
4、使用官方提供的scroll-view自定义的动画时,当scroll-view内容不足充满一屏时下拉出现问题
将scroll-view设置固定高度后,将其子元素的高度设置多一像素达到隐形撑满的效果。
5、scroll-view内fixed元素问题
ios内scroll-view内fixed元素层级会出现问题,可能出现被遮挡的问题。
6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题
一个是页面滚动条一个是scroll-view滚动条,由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。
Q5和Q6可以合并成一个问题,当页面需要一个吸顶 *** 作时,即滑动距离超过阈值时导航条吸顶的功能,若scroll-view将整个页面包含就会出现Q5的问题,可能导致在ios内吸顶的导航栏无法显示,若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。
1)在页面未触发吸顶时禁止scroll-view模块下拉,触发后放开滚动,同时会导致无法下拉。
2)页面滚动触发,scroll-view模块可下拉,但是滚动区域无法滚动,且下拉动画只显示一次。
前端移动端开发,在页面中打开了一个层,同时打开一个遮罩层,滚动这个层时 下面的页面也会跟着滚动,禁止下面那个页面的滚动, 只滚动当前的层。
打开d层时body的touchmove事件addEventListener增加阻止默认行为的事件,关闭d层时removeEventListener;
阻止touchstart事件的默认行为,在vue下@touchstartprevent,在d出层和底层元素之间曾加一层遮罩;
taro单独为某个项目切换taro版本环境
单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1x 的,多个项目间的依赖不冲突,其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI,你需要先装一个:
# 如果你使用 NPM
$ npm install --save-dev @tarojs/cli@2x
# 如果你使用 Yarn
$ yarn add -D @tarojs/cli@2x
echarts在小程序中滑动卡顿
由于微信小程序中,echarts的层级最高,无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug,我只能委屈求全了。打开ec-canvaswxml文件,将touchStart、touchMove和touchEnd去掉了,直接删除就好啦。这三个事件应该是做缩放的吧,我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求,还是没有真正的解决问题。
原:
bindinit="init"
bindtouchstart="{{ ecdisableTouch '' : 'touchStart' }}"
bindtouchmove="{{ ecdisableTouch '' : 'touchMove' }}"
bindtouchend="{{ ecdisableTouch '' : 'touchEnd' }}"
现:
bindinit="init"
echarts在小程序中无法跟随页面滑动
在卡顿问题中能与echarts交互少的,可以直接使用代替cannvas,即在echarts渲染完毕后将它替换为一张。
如果我更新了数据,那么就重新放出echarts,等它渲染完毕后,再次替换为一张。
charton('finished', () => {
getCurrentInstance()pageselectComponent(id)canvasToTempFilePath({
success: res => {
consolelog('restempFilePath====',restempFilePath)
thissetState({
echartImgSrc: restempFilePath
})
},
fail: res =>consolelog('转换失败', res)
});
})
render:
thisstateechartImgSrc ==''
ref={thisrefChart}
id={thisstateid}
canvas-id="mychart-area"
force-use-old-canvas="true"
ec={thisstateec}
/>
:
<CoverImage src={thisstateechartImgSrc}></CoverImage>
微信小程序 触控事件: 微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。 接下来把文档copy过来 原文地址:>
以上就是关于禁用body的touchmove事件后,里面的div滚动条怎么控制全部的内容,包括:禁用body的touchmove事件后,里面的div滚动条怎么控制、微信小程序模态框textarea能滚动的问题、[wx]微信小程序自定义下拉刷新等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)