for i in lable: if(i == "phone"): # window.label_6.setText("<font color=red>正在用手机</font>") # window.label_9.setText("<font color=red>请不要分心!!!</font>") if ActionCOUNTER > 0: ActionCOUNTER -= 1

### 小程序 `radio-group` 实现单击选中再次点击取消的功能（第三种方式） 以下为基于 **uni-app** 或者类似的 Vue 驱动框架的具体实现代码示例。这种实现方式能够很好地满足用户需求，即通过单击选中某个选项后再点击该选项可将其取消选中。 #### HTML 结构 ```html <template> <view class="container"> <!-- Radio Group --> <radio-group @change="handleChange"> <block v-for="(option, index) in options" :key="index"> <label class="radio-item" @click="handleClick(option.value)"> <radio color="#007AFF" :value="option.value" :checked="isChecked(option.value)" /> {{ option.label }} </label> </block> </radio-group> <!-- 显示当前选中值 --> <view>当前选中：{{ selectedValue || '未选择' }}</view> </view> </template> ``` --- #### JavaScript 逻辑 ```javascript <script> export default { data() { return { // 定义选项列表 options: [ { label: '选项 A', value: 'A' }, { label: '选项 B', value: 'B' }, { label: '选项 C', value: 'C' } ], // 存储当前选中的值 selectedValue: null }; }, methods: { /** * 处理点击事件 */ handleClick(value) { if (this.selectedValue === value) { // 如果当前选中的值等于点击的值，则清空选中状态 this.selectedValue = null; } else { // 否则更新为新的选中值 this.selectedValue = value; } }, /** * 判断某选项是否被选中 */ isChecked(value) { return this.selectedValue === value; }, /** * 改变事件回调函数 */ handleChange(event) { console.log('Radio change:', event); } } }; </script> ``` --- #### CSS 样式 为了提升用户体验，可以适当美化界面布局： ```css <style scoped> .container { padding: 20px; } .radio-item { margin-bottom: 10px; font-size: 16px; } </style> ``` --- ### 功能解析 1. **数据结构设计** - 使用 `options` 数组存储所有的选项及其对应的值。 - 使用 `selectedValue` 来记录当前选中的值[^1]。 2. **核心逻辑** - 在每次点击时调用 `handleClick` 方法判断当前点击的值是否已经处于选中状态。 - 若已选中，则将 `selectedValue` 清空；否则，更新为新的值[^2]。 3. **动态渲染** - 使用 `v-for` 指令遍历 `options` 数组生成多个 `<radio>` 元素。 - 使用 `isChecked` 方法动态设置每个 `<radio>` 的 `checked` 属性[^3]。 4. **事件监听** - 监听 `@click` 事件以触发自定义逻辑。 - 提供 `@change` 回调以便后续扩展功能。 --- ### 总结 上述代码实现了在小程序中通过 `radio-group` 和 `radio` 组件完成单击选中、再次点击取消选中的功能。整个过程依赖于 Vue 数据驱动机制，确保了逻辑清晰且易于维护。 ---

<think>我们之前已经讨论过uni-app中onReachBottom只执行一次的问题，现在根据用户提供的站内引用，进一步整理解决方案。 用户引用的内容中提到了几个关键点： 1. pages.json中必须设置onReachBottomDistance（引用[1]和[2]） 2. 页面结构问题：使用绝对定位或固定定位可能导致无法触底（引用[4]） 3. 设置了overflow样式可能导致失效（引用[5]） 4. 使用scroll-view会屏蔽页面滚动事件（之前已提到，引用[4]中也有类似问题） 结合之前的回答和新的引用，我们重新梳理解决方案： 问题：uni-app onReachBottom 方法仅触发一次 可能原因及解决方案： 1. **pages.json未配置触发距离**（最常见） 在pages.json中为对应页面设置`onReachBottomDistance`，建议值100-150（引用[1][2]）。 ```json // pages.json { "pages": [ { "path": "pages/yourPage", "style": { "onReachBottomDistance": 150 // 设置触发距离 } } ] } ``` 2. **页面内容高度不足** 确保初始数据足够撑满一屏，否则不会触发滚动。可以在onLoad中初始化数据。 3. **页面结构问题** - 避免在页面最外层使用`position:absolute`或`position:fixed`（引用[4]）。 - 避免使用`overflow`样式（引用[5]），特别是外层容器设置`overflow:scroll`可能影响。 - 确保页面内容从顶部开始布局，没有额外的定位偏移。 4. **使用了scroll-view组件** scroll-view会屏蔽页面滚动事件，应移除scroll-view，使用普通view（引用[4]）。 5. **加载状态锁未重置** 在onReachBottom中，如果设置了loading状态，在数据加载完成后必须重置为false，否则后续触发会被拦截。 6. **跨端样式问题** 在App端，如果页面样式使用了scoped，可能需要单独为page元素设置样式（引用[5]）： ```html <style> /* 非scoped样式 */ page { height: 100vh; background-color: #F5F6FA; } </style> <style scoped> /* 组件样式 */ </style> ``` 7. **列表容器高度问题** 如果页面底部没有足够空间，可以添加一个空白view（引用[5]）： ```html <template> <view> <!-- 列表内容 --> <view v-for="(item,index) in list" :key="index">{{item}}</view> <!-- 底部空白，确保有滚动空间 --> <view style="height:300rpx;"></view> </view> </template> ``` 完整示例代码： ```javascript // 页面脚本 export default { data() { return { list: [], // 列表数据 loading: false, // 加载状态 page: 1, // 当前页码 } }, onLoad() { // 初始化数据，确保第一屏有足够数据 this.loadData() }, methods: { loadData() { // 模拟请求 uni.showLoading({ title: '加载中' }) setTimeout(() => { // 生成新数据 const newData = Array(10).fill().map((_, i) => `Item ${this.list.length + i + 1}`) this.list = [...this.list, ...newData] uni.hideLoading() this.loading = false // 重置加载状态 }, 1000) } }, onReachBottom() { // 防止重复请求 if (this.loading) return this.loading = true this.page++ this.loadData() } } ``` ```html <!-- 页面模板 --> <template> <view class="content"> <!-- 避免使用scroll-view --> <view v-for="(item, index) in list" :key="index" class="item">{{item}}</view> <!-- 底部空白区域 --> <view style="height: 300rpx;"></view> </view> </template> <style> /* 全局page样式 */ page { height: 100vh; background-color: #F5F6FA; } </style> <style scoped> .content { /* 避免使用绝对定位和overflow */ } .item { height: 120rpx; line-height: 120rpx; text-align: center; border-bottom: 1px solid #eee; } </style> ``` ```json // pages.json配置 { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "分页测试", "onReachBottomDistance": 150 } } ] } ``` 如果按照以上步骤仍然无法解决，请检查是否有其他因素影响滚动区域计算，例如自定义导航栏（navigationStyle:custom）可能需要调整页面顶部内边距。 相关问题： 1. uni-app中如何实现自定义导航栏下的滚动区域适配？ 2. uni-app长列表性能优化有哪些方案？ 3. uni-app中scroll-view和页面滚动如何选择？ 4. uni-app如何实现跨端样式兼容？</think>### Uni-App `onReachBottom` 方法仅触发一次解决方案 根据引用内容和实践经验，`onReachBottom` 只执行一次通常由以下原因导致，以下是完整解决方案： #### 核心问题排查与解决 1. **页面配置缺失**（关键！） 在 `pages.json` 中必须设置触发距离（引用[1][2]）： ```json { "path": "pages/yourPage", "style": { "onReachBottomDistance": 150, // 建议150px "enablePullDownRefresh": true } } ``` 2. **布局结构问题**（高频原因） - **绝对定位导致失效**（引用[4]）： 移除容器层的 `position: absolute/fixed` ```html <!-- 错误示例 --> <view class="container" style="position: absolute"> ... </view> <!-- 正确示例 --> <view class="container"> <!-- 内容 --> </view> ``` - **高度不足**（引用[5]）： 在页面底部添加空白区域： ```html <template> <view> <!-- 主要内容 --> <view style="height: 300rpx"></view> <!-- 确保滚动空间 --> </view> </template> ``` 3. **CSS 样式冲突**（引用[5]） - 避免在容器层使用 `overflow: scroll` - 正确设置页面高度： ```css /* 单独添加全局样式 */ <style> page { height: 100vh; background: #F5F6FA; } </style> <style scoped> /* 组件样式 */ </style> ``` 4. **数据加载逻辑错误** ```javascript export default { data() { return { list: [], loading: false, // 状态锁 page: 1, noMore: false } }, onReachBottom() { if (this.loading || this.noMore) return this.loading = true uni.showLoading({ title: '加载中' }) // 模拟请求 setTimeout(() => { const newData = Array(10).fill().map((_, i) => ({ id: this.list.length + i })) this.list = [...this.list, ...newData] this.page++ this.loading = false // 关键：重置状态锁 uni.hideLoading() // 模拟无更多数据 if (this.page > 3) this.noMore = true }, 1000) } } ``` 5. **错误使用 scroll-view**（引用[4]） ```html <!-- 错误：scroll-view 会屏蔽页面滚动 --> <scroll-view scroll-y> <view v-for="item in list">...</view> </scroll-view> <!-- 正确：使用普通容器 --> <view> <view v-for="item in list">...</view> </view> ``` #### 完整可运行示例 ```html <!-- 页面模板 --> <template> <view class="content"> <view v-for="item in list" :key="item.id" class="item"> {{ item.id }} - 列表项 </view> <!-- 底部提示 --> <view v-if="noMore" class="no-more">没有更多了</view> <view v-else class="loading-text">{{ loading ? '加载中...' : '上拉加载' }}</view> </view> </template> <script> export default { data() { return { list: Array(15).fill().map((_, i) => ({ id: i + 1 })), loading: false, noMore: false, page: 1 } }, onReachBottom() { if (this.loading || this.noMore) return this.loading = true console.log('触底触发') // 模拟API请求 setTimeout(() => { const newData = Array(5).fill().map((_, i) => ({ id: this.list.length + i + 1 })) this.list = [...this.list, ...newData] this.page++ this.loading = false // 模拟数据结束 if (this.page >= 4) this.noMore = true }, 1500) } } </script> <style> /* 关键：全局页面高度 */ page { height: 100vh; background-color: #f7f7f7; } .content { padding: 20rpx; } .item { height: 120rpx; line-height: 120rpx; border-bottom: 1rpx solid #eee; text-align: center; } .loading-text, .no-more { text-align: center; padding: 30rpx; color: #999; } </style> ``` ```json // pages.json 配置 { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "分页测试", "onReachBottomDistance": 150 } } ] } ``` #### 排查流程图 ```mermaid graph TD A[onReachBottom只触发一次] --> B{检查pages.json配置} B -->|未设置| C[添加onReachBottomDistance] B -->|已设置| D{检查页面布局} D -->|绝对定位| E[移除position:absolute] D -->|高度不足| F[添加底部空白view] D -->|使用scroll-view| G[改用普通view] A --> H{检查数据加载逻辑} H -->|loading未重置| I[确保重置loading:false] H -->|无更多数据| J[添加noMore状态判断] ``` > **关键提示**： > 1. 小程序端需确保页面内容高度 > 屏幕高度 + `onReachBottomDistance` > 2. H5端需检查浏览器滚动条是否生效（禁用`body{overflow:hidden}`） > 3. 使用自定义导航栏时，需手动设置页面顶部内边距[^4] --- ### 相关问题 1. uni-app 中如何优化长列表滚动性能？ 2. uni-app 的 `scroll-view` 和页面滚动应该如何选择？ 3. uni-app 如何实现跨端兼容的下拉刷新功能？ 4. uni-app 中自定义导航栏导致滚动区域计算错误怎么办？