微信小程序真机调试onReachBottom不触发、v-model失效等问题

我好菜

已于 2023-04-26 14:22:28 修改

阅读量1.2k

点赞数 3

文章标签：微信小程序小程序

于 2023-04-26 14:20:30 首次发布

本文链接：https://blog.youkuaiyun.com/csdn_hsr/article/details/130384848

版权

在微信开发者工具中一切正常，但当运行到真机上时，v-model的双向绑定失效，登录后用户信息无法传入接口，onReachBottom事件也不触发影响了分页功能。经过排查，问题在于未开启‘开发调试’模式，开启后问题得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信开发者工具上一切都是正常的，一到真机上连v-model都不能做双向绑定，登录连用户信息都不能传入接口参数里，onReachBottom不触发导致分页也不能成功。

一开始以为是代码在真机和开发者工具上运行有差异，需要调整或者配置什么，但是怎么都解决不了，直到......

我打开了“开发调试”，重新进入小程序就可以了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我好菜

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
7
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 onReachBottom 上拉触底加载没触发

Dove言和

08-18

3845

在数据渲染到小程序端的时候，大量数据会造成页面卡顿，严重的话会卡死，增大服务器压力 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数 小程序自带能检测到到用户触底事件的函数开发中可能会遇到写个底部触发事件，但是运行却没生效？ //底部触发 onReachBottom: function () { wx.showLoading({ title: '加载中...', }) console.log('到底了'); ..

微信小程序真机一键清空搜索框按钮失效的问题

Debug的博客

05-29

767

【代码】微信小程序真机一键清空搜索框按钮失效的问题。

7 条评论您还未登录，请先登录后发表或查看评论

uniapp 真机调试onReachBottom不生效

Motion_zq的博客

09-16

824

uniapp 真机调试onReachBottom不生效

小程序页面滚动到底部，onReachBottom()却没有执行

最新发布

qq_43765528的博客

05-11

282

在开发小程序或网页时，onReachBottom() 函数没有执行的解决方案

onReachBottom没有触发？填坑之路

轻量开发

04-17

2349

最近搞微信小程序，遇到onReachBottom没有触发的问题。其他页面滑动到底部能触发onReachBottom。但是新搞的页面怎么设置都不行。百度各种方法都用上了。最后，我还是从引入组件排查。发现用<scroll-view/>就不会触发onReachBottom。经过查看api,发现此控件有自带的触发回调，bindscrolltolower就是触发底部回调的。

【微信小程序页面出现onReachBottom不触发的情况】

没落的博客

03-06

2940

无法触发的原因是：height设置为100vh,会导致滑动不会触底。修改一下css就会触发。

微信小程序上拉触底事件函数onReachBottom不触发的解决方案

qq_43447509的博客

08-01

1万+

造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部需要回到顶部重新计算高度 onReachBottom函数被覆盖 1.配置属性问题在app.json或者本页的json文件中配置onReachBottomDistance属性，区别在于全局还是只在本页生效 2.高度问题 //设置容器高度为100% page{ height: 100% } 3. 切换页面时滚动条滚回到顶部 //切换页面时调用API wx.pageScrollTo({ scrollTop: 0 }) 4.

微信小程序：input用正则限制输入但是失效

CY_WINT的博客

01-11

1169

加一个$nextTick()函数进行实时监听修改，就解决了，或者使用setTimeOut函数重复调用赋值应该也ok。问题：正则匹配修改，但是仍然失效，通过打印数值发现已经修改成功，所以问题出在没有实时修改上。效果：想要实现输入框只能输入数字，第一位不能是点，小数点后只有两位数字等等。最后贴上正则处理函数。

uniapp ios scroll-view中z-index失效的问题

weixin_53236070的博客

10-28

749

uniapp ios scroll-view中z-index失效的问题

微信小程序笔记

weixin_74146432的博客

06-25

922

通过接口文档得知，我们需要以上的参数，我们先将参数提前声明，然后在发起请求获。在输入框中输入购买的数量，并不是直接将输入的数量同步给服务器，而是需要计算差。使用的是同一个借口，为什么加入购物车没有。这一步，咱们需要做的就是：订单编号发送给公司的后端，其他逻辑时后端来完成的。通过调用后端接口获取支付状态，如果支付成功，需要给用户提示，同时跳转到订单列。临时路径具有失效时间，需要将临时路径上传到公司的服务器，获取永久的路径，再。如果数据相等，商品列表已经加载完毕，如果数据已经加载完毕，需要给用户进行。

【微信小程序开发零基础入门】——微信小程序入门

m0_52435951的博客

02-17

1万+

微信小程序入门一、小程序介绍1.1.什么是小程序？1.2. 微信⼩程序历史1.3.小程序可以干什么？1.4.疯狂的微信⼩程序1.5. 还有其他的⼩程序不容忽视1.6. 官⽅微信⼩程序体验二、小程序开发资料三、第⼀个微信⼩程序四、开发小程序储备知识五、小程序特点六、wxml 语法七、小程序 API八、小程序特点九、小程序支付流程一、小程序介绍 1.1.什么是小程序？ 2017 年度百度百科十大热词之一 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (

微信小程序设置上拉触底事件onReachBottom()不生效，检查是不是自动生成的代码把自己写的代码覆盖掉了

weixin_54799350的博客

05-25

1184

如果调试发现事件未被触发，控制台也没有输出，检查当前页面的.js文件，自己写的函数和小程序开发者工具自动生成的代码是否重复的地方，删掉一处即可。创建项目时，微信小程序开发者工具会自动生成有关上拉触底事件的处理函数。

微信小程序：onReachBottom(),onPullDownRefresh()事件不触发的原因

Queen-Shir的博客

11-29

7539

onReachBottom()下拉触顶：原因：页面上的内容没有超出文档的高度，当前页面没有滚动条，就不会触发上拉触底事件。上拉不了就不会触底。此时可以用滚动监听事件代替。 onPageScroll:function(e){ console.log(e.scrollTop); if (e.scrollTop>=92){ ...... } ...

微信小程序使用上拉加载onReachBottom。页面拖不动。一直无法触发上拉的事件。

肖肖肖丽珠的博客

01-21

1101

1，可能是原因是你使用了scroll-view的标签，用onReachBottom触发加载事件。如果页面的样式是滚动的是无法去触发页面的onReachBottom的函数的。因此，你使用overflow:auto.来使用页面的某些元素滚动，照样也无法触发onReachBottom。我给滚动的内容加了边框样式。这个样式只对第一页展示的区域有效果。加上了overflow:auto.的确滚动的区域就是加了border的红色区域。减去底部的tabbar高度，这样总行了吧。起初我以为我给滚动区域设置一个高度。

小程序onReachBottom不触发解决办法（附代码）

白_的博客

07-21

918

将height100%;改成min-height101vh;并把scroll-view的宽度和高度设置为100%即可。

onReachBottom不触发

weixin_45851714的博客

03-02

248

page的高度设置了height：101%；

微信小程序上拉触底onReachBottom没触发的解决方案

m0_61848095的博客

03-25

777

微信小程序上拉触底onReachBottom没触发的解决方案

【小程序】onReachBottom 事件为什么不能触发 ?（一秒搞定）

热门推荐

Songywaa的博客

04-04

1万+

onReachBottom 开发中遇到onReachBottom 不能触发控制台只看到Invoke event onReachBottom in page: pages/alarm/alarm 自己的代码：到最后才发现是因为页面生成得时候就自带onReachBottom 和onPullDownRefresh俩个方法：（自己写的方法在上边，给覆盖掉了）记录这里，给跟我遇到一样问题的你！！...

uniapp v-model

01-21

### 使用 `v-model` 实现双向绑定在 UniApp 中，`v-model` 是用于实现数据和表单元素之间双向绑定的重要指令。当使用 `v-model` 绑定输入框或其他表单控件时，任何来自用户的输入都会自动同步到相应的 Vue 数据属性中[^1]。对于简单的字符串或数值类型的变量，可以直接应用 `v-model` 进行绑定： ```html <template> <view>  <input v-model="text" placeholder="请输入内容"/>  <p>您输入的是：{{ text }}</p> </view> </template> <script setup> import { ref } from 'vue'; // 定义响应式的文本变量 let text = ref(''); </script> ``` #### 对象属性的绑定如果需要绑定的对象是一个复杂结构体中的某个字段，则可以通过指定路径的方式来进行绑定。例如给定一个对象 `inputInfo` 并希望只对其内部名为 `data` 的成员执行双向绑定: ```html <template> <view>  <input v-model="inputInfo.data" />  <div>{{ inputInfo.data }}</div> </view> </template> <script setup> import { reactive } from 'vue'; const inputInfo = reactive({ data: '' }); </script> ``` 需要注意的是，在某些情况下直接对传入子组件内的 prop 值做 `v-model` 可能会引发错误，因为这违反了单向数据流的原则——即不应该试图修改由父级传递下来的 props[^3]。此时应该考虑创建局部状态副本再进行操作。另外，在微信小程序环境下遇到 `v-model` 失效的情况时，可能是因为平台特性所致；一种常见的解决办法是在事件处理器内加入短暂延时来触发更新动作[^4]: ```javascript function inputFilter() { let inputStr = value.value; // 添加延迟以确保正确更新 setTimeout(() => { value.value = inputStr; }, 1); } ```