在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效。 这里演示一个切换选项重置滚动条事件的案例: <scroll-viewclass="listDetail"scroll-y="true" bindscrolltol...
if(e.detail.scrollTop > 300) {//触发gotop的显示条件 this.setData({ 'scrollTop.goTop_show': true }); console.log(this.data.scrollTop) }else{ this.setData({ 'scrollTop.goTop_show': false }); } }, goTopFun:function(e) { var_top = this.data.scrollTop.scroll_top;//发现设置scrol...
一、问题原因 1.渲染时机不当:在微信小程序中,如果scroll-top属性的值在页面渲染未完成时就被设置,可能会导致页面元素重新渲染,从而产生闪烁。 2.频繁更新scroll-top:当scroll-top属性的值在短时间内频繁更新时,会加重小程序的渲染负担,导致页面闪烁。 3.性能问题:对于内容较多或复杂的页面,如果设备性能不足,也...
定义两个变量 data: {bodyText:'',// 展示的文本内容scrollTop:0// 竖向滚动条的位置} 定义一个方法,设置滚动条定位到底部 autoScroll() {letthat =thisletquery = wx.createSelectorQuery()// 通过class选择器定位到scorll-viewquery.select('.scroll-text').boundingClientRect(res=>{ that.setData({// ...
通过滚动触发事件,获取距离文档顶部的scrollTop值,当达到一定条件【>300】的时候,显示gotop层,针对这个层写点击事件,重新设置scroll-top值,偶然间发现设置scroll-top的一个bug,如果我下一次设置的值和本次scroll-top值是一样的,那么文档并不会有任何动作。因此我的做法是在0和1之间切换设置,具体做法如下: ...
scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.pageScrollTo这个api。 用scroll-view标签 这个标签适合于屏幕内的小范围滚动和锚点滚动,分别通过scroll-top和scroll-into-view这两个标签属性来实现。注意这是标签内属性,所以需要动态改变的话,就需要用this.setData动态设置scroll-top和scro...
一、概述 使用HTML5在浏览器设置scrollTop初始值初始值,由于可以通过dom树定位、操作元素,实现相对比较简单。 而在vue等框架中,由于对dom树的淡化,导致通过dom树设置scrollTop等属性值难度较大、且不易成功! 二、浏览器设置scrollTop初始值 在浏览器设置scrollTop初始
在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效。 这里演示一个切换选项重置滚动条事件的案例: <scroll-view class="listDetail"scroll-y="true"bindscrollto...
腾讯云医小程序有医患聊天会话的场景,由于会话场景存在查询历史消息的场景,小程序中按照常规思路加载历史消息时会出现跳动的问题;跳动的原因是由于在’顶部’插入dom,会使得后面的dom被往后面推,然后重新设置scroll-top或者scrol-into-view从而导页面出现跳动;我们尝试采用【前端开发中聊天场景的体验优化】文章中的方案处理...
1、纵向滚动(scroll-y)时,必须设置height值,并且不能使用css中的calc来计算,scroll-top值才会生效 2、小程序中双击顶部的textbar,无法回到顶部 3、无法触发page的上拉(ReachBottom)和下拉(PullDownRefresh)事件 4、当页面中position:fixed布局不受影响