微信小程序scroll-view bindscrolltolower事件不触发

微信小程序scroll-view bindscrolltolower事件不触发

<view>
        <scroll-view hidden="{{m_hidden}}" style="height:500px" scroll-y="true"  bindscrolltolower="loadMore" wx:for="{{month_list}}" wx:for-index="idx" wx:for-item="holidayAll">
                        <view class="month">
                                <image src=" https://calendar.8geek.com/Public/Mapi/imgs/month/{{monthImg}}.png"  animation="{{animationData_month}}"></image>
                        </view>
                        <view class="solid f_solid"  animation="{{animationData_sliod}}"></view>
                        <view class="week">
                                <view>一</view>
                                <view>二</view>
                                <view>三</view>
                                <view>四</view>
                                <view>五</view>
                                <view>六</view>
                                <view>日</view>
                        </view>
                        <view class="day">
                                <view wx:for="{{holidayAll}}" wx:for-index="idx" wx:for-item="holidayAll_1" class=" rili_box  ripple {{day_showName}}"   bindtap="day_showThis">
                                        <view>{{idx+1}}</view>
                                        <view>{{holidayAll_1.lunarday}}</view>
                                </view>
                        </view>
                </scroll-view>
        </view>

页面其他元素都hidden了 , bindscrolltolower="loadMor" 还是触发不了...求解啊

0

1个回答

高度500px是否不合适?

可以用如下代码获取页面高度存到winH中。

     wx.getSystemInfo({
    success: ( res ) => { // 用这种方法调用,this指向Page
        this.setData({
            winH: res.windowHeight
        });
    }
});

然后

     <scroll-view …(省略其它属性)... style="height: {{winH}}px;">
0
m0_37538027
m0_37538027 按你说的做了 高也设置到了 但是还是触发不了...
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
小程序scroll-view中的bindscrolltolower方法失效的原因是,nn为这个scroll-view以及page的高度都设置为100vh;nn需要在app.wxss中设置nnpage{n height:100vhn}nn并且在有scroll-view的view中设置height:100vhnn即可、...
微信小程序中 scroll-view 属性 bindscrolltolower 事件触发不生效
最近做公司微信小程序的项目时 遇到的问题 记录一下文帝防止日后出现相同的错误nn问题所在:处理滚动到底部 触发滚动到底部事件 (bindscrolltolower) 的时候 并没有 生效!nn经过多方面的资料排查,以及官方文档的查询 终于解决了 本人的困惑nnn&amp;lt;scroll-viewn class='pages-container'n scroll-y=&quot;true&quot;nn ...
微信小程序scroll-view的bindscroll事件不触发问题(已解决)
今天在开发微信小程序项目过程中,用到了scroll-view组件,想使用这个组件让页面实现纵向滚动并获取它的输出值,一切准备就绪发现页面滚动死活触发不了事件,查阅各种类似问题都说:nn1、scroll-view高度设置出错,有说不能设置百分比,有说要在wxss里给它设置高度;nn2、scroll-y='true'是不是忘记写了;nn但是,事实上我这些都已经设置好,不管百分比高度还是实际高度都设置过...
[小程序]scroll-view 的 bindscrolltoupper 不触发解决办法
设置page,scroll-view的height:100%rnrn
微信小程序中 scroll-view触底事件不触发的解决方法
scroll-view组件是否设置了确定的高度,若没有请设置n n n scroll-view组件的 lower-threshold 参数是否带了单位,若带了单位如 px、rpx等,请去除,只使用数值。n n n 若设置了上面两项还是没有效果,将 scroll-view的高度设置为具体的数值,如:100pxn n n 其他事件的设置类似触底事件n n...
微信小程序-scroll-view上拉多次触发加载事件
之前那篇博客里边写了滑块的margin属性影响了滑动效果。这篇文章写一下上拉时多次触发上拉加载事件。(改好的代码如下)其实也比较简单,就是有可能没有意识到这个小细节。在官方文档中有这么一个属性(如图)。这个属性是设置距离底部多少距离是触发事件。我们吧这个属性设置成0就可以了。只有上拉到最底部才会触发。&amp;lt;scroll-view lower-threshold=&quot;0&quot; class=&quot;scroll...
微信小程序:scroll-view组件滑动多次触发scroll事件的bug解决
在项目开发过程中,组件是微信小程序提供给我们的一个分页器,一般滑动到底部时会触发scroll事件,scroll事件中往往包含对后端数据的请求;若是还未滑动到底部时频繁触发事件,则会频繁发请求,达不到想到的分页效果。 n先来说说的用法nn&amp;lt;scroll-view scroll-y=&quot;true&quot; style=&quot;height:{containerHeight}px&quot; lower-threshold...
微信小程序scroll-view快速滚动不能及时触发bindscrolltoupper且获取scrollTop不准确
在使用scroll-view组件的过程中,想要在视图滚动到顶部时做一些事情nn监听bindscrolltoupper,官方文档中upper-threshold默认值为50,因为场景需要把upper-threshold设置为0发现问题nn问题:快速滚动视图时不能100%触发bindscrolltoupper事件nn于是通过bindscroll事件来打印scrollTop值,发现当快速滚动屏幕到顶时不...
微信小程序 scroll-view滚动到底部事件不触犯的锅
今日准备把微信小程序的下拉刷新做一下,没想到我绑定了bindscrolltolower事件,但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力,找了很多资料,才发现,居然要设置scroll-view高度,于是我在.wxss里设置了高度为100%:n.scrollStyle{n width: 100%...
小程序回到顶部按钮(不依赖scroll-view) onReachBottom可用
实现原理: 用bindtouchmove获取WXML节点信息的相关函数,获取顶部滚动出去的距离,从而控制返回顶部按钮的显示/隐藏&amp;lt;view class=&quot;container&quot; bindtouchmove=&quot;handletouchmove&quot;&amp;gt;n ...n&amp;lt;/view&amp;gt;nn&amp;lt;!-- 返回顶部按钮 --&amp;gt;n&amp;lt;view class='gotop' wx:if...
微信小程序—下拉刷新上拉加载
1.使用scroll-view实现下拉刷新上拉加载<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="refresh">n <view class="item" wx:for="{{lis
小程序scroll-view组件触发事件
scroll-viewn组件在下拉刷新与到底部触发事件时,会受n属性名 类型 默认值 说明nupper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件nlower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件n这两个属性的影响n...
小程序连续tap事件设置scroll-view的位置会导致tap事件触发延迟和卡死
问题模块n 框架类型n 问题类型n API/组件名称n 终端类型n 微信版本n 基础库版本n API 和组件n 小程序n Bugn scroll-viewn 客户端n 6.7.2n 2.23n - 当前 Bug 的表现nn    点击view触发tag事件,该事件只设置scroll-view属性scroll-into-view或scroll-to...
微信小程序touchend事件不触发的bug解决
n n n 昨天开发微信小程序按住录音,松手停止录音的功能。刷刷刷三下两下开发完成。嗯,开发工具上测试没问题,调试模式真机测试没问题,很好完美。然后发布体验版,扫码体验一番,第一次按住录音,松手发送,嗯,不错,得意!!。哈哈,再来一次,我去,咋回事,松手咋不发送了,还在录音??touchend触发不了。开发工具上扫码预览试试,也有这个问题。所以现在情况就是:n开发工具...
微信小程序中使用scroll-view和onPullDownRefresh一起使用实现scroll-view的下拉刷新的办法
1.效果:boss要在同一个页面当中,通过左右滑动呈现出不同数据,并且数据是以列表的形式展示,并且可以通过下拉刷新.2.实现:左右滑动的功能可以通过swiper实现,并设置circular=&quot;{{true}}&quot;每个页面的list如果直接显示在swiper-item里面的话是无法下拉/上拉显示数据的,所以需要在swiper-item里面使用scroll-view并设置&quot;scroll-y=&quot;{{tru...
小程序上拉下拉共存时不可使用scroll-view的解决方法
使用bindscrolltolower,必须搭配使用的scroll-view会导致小程序"enablePullDownRefresh": true下拉不能使用。nn解决方法,就是当两者同时存在时,改scroll-view为view,改bindscrolltolower为onReachBottom函数。nn这样在上拉加载,跟下拉刷新同时存在的时候,"enablePullDownRefresh": t
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据 上篇
前言页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验。每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。
微信小程序坑-scroll-view滑动列表(就一行,没有填满屏幕就会触发上拉加载事件)
比方说如下图片中有一个滑动列表。我的这个页面只有一行数据,按理说我们滑动时候是不应该触发上拉加载的,因为滑动的scroll-view元素高度是设置的100%。结果我这里就触发了上拉加载事件。图中两个箭头,箭头1的地方是scroll-view的一个子元素的margin-top如下图代码。原因:就是&amp;lt;view wx:for=&quot;{{arr}}&quot; class='item'&amp;gt;元素设置margin...
微信小程序 上拉下滑触发,计算实际scroll-view的高度
在小程序中实现scroll-view上拉下滑触发必须设置它自身的高度,有的时候还有别的元素,不一定就是整个屏幕,这时候我们就得计算它的实际高度了,以至于能够动态的适应不同的手机屏幕nn计算高度这样的nnnn wx.getSystemInfo({n success: function (res) {n console.info(res.windowHeight);n ...
微信小程序上拉刷新和下拉加载2种方法实现,onPullDownRefresh,scroll-view使用
这篇文章,直接开怼,代码有详细注释rnrnrnonPullDownRefresh实现下拉刷新 rn一、获取数据rn //product2获取数据n loadProduct2: function () {n var that = this;n wx.request(OBJECT)//发起网络请求。使用前请先阅读说明。n },rnrn二、下拉调用rnrnrnrnrnrnrnrnrnr
微信小程序中使用scroll-view控件实现上拉加载更多遇到的坑
前段时间因公司需求开始学习并开发小程序。做到上拉加载功能的时候遇到小程序的一个坑,以下做个记录避免后人踩坑。rn实现小程序上拉加载有两种方式:1.在page页面的onReachBottom()方法中写上拉加载的逻辑  2.给scroll-view控件设置高度后,设置scroll-view的bindscrolltolowerrn属性,在回调方法中写上拉加载逻辑。我用的第二种方式,但是在上拉加载的时候
小程序 height: 100vh; onReachBottom触底事件不触发
css部分n.content {n display: block;n /* height: 100vh; */n margin-top: 85rpx;n}nn如上注释height即可nn
微信小程序监听scroll-view滑动到顶部、底部、左边、右边
微信小程序监听scroll-view滑动到顶部、底部、左边、右边rn    微信小程序中经常需要监听scroll-view的滑动边界以做相应的业务操作。rnrnrnrn当滚动到顶部时会触发bindscrolltoupper事件(具体可留意GIF输出)当滚动到底部时会触发bindscrolltolower事件(具体可留意GIF输出)当滚动到最左边时会触发bindscrolltoupper事件(具体可
【微信小程序】scroll-view,让页面不能下拉刷新的原因
我用了scroll-view标签来作为整个页面的容器,内容多,方便浏览,这时就发现下拉刷新不了,所以怎样下拉刷新+页面支持下滑?nn答案是scroll-view改为view,height由100vh改为100%即可。至于下拉刷新的配置不用多讲吧。nnjson的nnn{n "enablePullDownRefresh": true,//开启下拉刷新n}nnnnjs的nnn onPullDown...
小程序Scroll-view上拉滚动刷新数据
小程序Scroll-view上拉滚动刷新数据n因为项目需求,我需要做一个上拉刷新,但是我不是小程序的原生刷新生命周期函数事件n小程序scroll-view,有一个滚到底部触发事件bindscrolltolower加粗样式nn把自己需要滚动的内容放在这个scroll-view之间,然后。给scroll-view一个滚动高度n首先先看一下效果图吧nnorder.wxml页面n &amp;lt;scroll-...
微信小程序-scroll-view组件(有坑)
nn根据官方给的案例,我感到深深的无力感,设置横向滚动时怎么都滚动不了,其中的苦就不多说,直接说干货。各种参数去看开发文档吧。nnn&amp;lt;!--index.wxml--&amp;gt;n &amp;lt;scroll-view class=&quot;vertical_scroll&quot; scroll-y=&quot;true&quot;&amp;gt;n &amp;lt;view class=&quot;scroll-view-item_H_bc_green&quot;...
微信小程序设置scroll-view高度并设置点击事件获取点击位置
(1)使用scroll-view必须设置高度,如何占用出去header之外的空间。rn(2)如何获取scroll-view列表点击的具体位置(不考虑bindtap,catchtap)rn&amp;amp;lt;view&amp;amp;gt;rn新闻界面展示rn&amp;amp;lt;/view&amp;amp;gt;rn&amp;amp;lt;scroll-view scroll-y = &amp;quot;{{true}}&amp;quot; style=&amp;quot;height:{{windo
小程序onreachbottom不执行
今天写一个列表页遇到一个问题 nn不管我怎么加载更多就是不触发onreachbottom这个触底事件nn先说说页面布局吧nn上边筛选条件定位的下边合计定位的nn我中间列表nn.list-box{nnwidth:100%;nnheight:80%;nnoverflow-y:scroll;nnposition:absolute;nntop:110rpx;nn}nn解决方法:因为一句样式问题 去掉hei...
微信小程序采坑五:页面使用scroll-view时,下拉刷新无法下拉
问题描述:nn 页面使用scroll-view时,下拉刷新无法下拉;nn解决办法:nn  scroll-view和下拉刷新不兼容
微信小程序,使用scroll-view实现下拉加载更多(下一页)源码
微信小程序,使用scroll-view实现下拉加载更多(下一页)源码。 可查看文章:http://blog.csdn.net/dKnightL/article/details/76724205
微信小程序fixed定位后scroll-view滚动失效问题
001.pngnn如图微信小程序中 scroll-view组件外div加display:flxed后, scroll-view组件滚动失效ngithub项目地址:https://github.com/fancaixia/wx-scroll-viewn解决办法:nnscroll-view宽度为屏幕宽度,n子元素view.cont设置overflow...
微信小程序 scroll-view下拉刷新
需求描述: n1.首先我的scroll-view部分是嵌套在template内 n2.应用template的页面顶部还有一个日期选择picker且位置固定 n3.下拉刷新当前页面template.wxml<template name="t1">n <scroll-view class="news" scroll-y="true" upper-threshold="0" bindscrolltolo
微信小程序中scroll-view中不设定高度实现自动滚动
在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度,现通过样式和布局实现高度自适应不设定高度
小程序 横向scroll-view不生效问题
n&amp;lt;scroll-view class=&quot;scroll-img&quot; scroll-x&amp;gt; n &amp;lt;image wx:for=&quot;{{item.pictures}}&quot; wx:key=&quot;*this&quot; wx:for-item=&quot;imgItem&quot; class=&quot;img-item&quot; src=&quot;{{imgItem}}&quot; mode=&quot;aspectFil
微信小程序-scroll-view滚动到指定位置(一)
先来说一下官网例子吧 API 自己看咯nn https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122nnnnnnnn有很多的注意事项,如果你不注意,滚动效果真的真的粗不来~~nnnhtml中nnscroll-view竖向滚动必须设置scroll-y="true" st
微信小程序 scroll-view详解
官方文档注意:本文全部代码实例皆为竖直方向滚动官方的代码实例(小小改动,自己增加了css)画重点:使用竖向滚动时,需要给&amp;lt;scroll-view&amp;gt;一个固定高度,通过 WXSS 设置 height,注意height的单位必须固定为px哦有几个必须要知道的值的含义:id: 注意id不能用数字,不然会一直报错烦死人。scroll-view:  就是默认显示的视图。scroll-into-vi...
微信小程序上拉加载更多的项目实例以及scroll-view标签的使用
近来团队让写一个小程序项目,在写某个模块首页列表时,打算采用分页方式请求后台,下拉加载更多。nn用到官方的一个关键标签 scroll-view。nn代码如下:nn一.在wxml文件中:nnn&amp;lt;view class='tipsbar'&amp;gt;共有{{total}}个待签收批次&amp;lt;/view&amp;gt;n&amp;lt;view class=&quot;navigator-box&quot;&amp;gt;n&amp;lt;scroll-...
微信小程序scroll-view在ios上滑动卡顿问题
-
【微信小程序笔记-3】组件-视图容器(ScrollView和Swiper)
以下是对与视图容器组件(ScrollView和Swiper)的简要使用说明nnnn一、scroll-viewnn1、基本设置nn首先是参考的开发文档网址 nhttps://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ n新建一个wxml文件,添加scroll-view组件,组件中添加“绿、红、黄、蓝”四种颜色的view组件(view组...
微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多
之前在做原生app开发的时候,下拉刷新和上拉加载更多是使用的比较多的一个功能了。现在在做微信小程序开发,小程序只提供了下拉刷新的接口。那么下拉刷新和上拉加载更多就需要我们换个思路实现了。关于scroll-view什么是scroll-viewscroll-view:可滚动视图区域。scroll-view的属性注意点使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。Bug & Ti
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 小程序 开发教程 微信 微信小程序游戏开发教程