微信小程序wx.showLoading()阻止屏幕滑动

最新推荐文章于 2025-05-13 08:42:11 发布

Hero_rong

最新推荐文章于 2025-05-13 08:42:11 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/Hero_rong/article/details/87862070

小程序专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了小程序中使用wx.showLoading方法加载图标的过程，包括如何显示和隐藏加载图标，以及如何通过设置mask参数来防止屏幕穿透，确保用户体验。

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

小程序，加载图标wx.showLoading

wx.showLoading({
  title:'加载中',                             
  mask:true                                    
})
//mask是防止屏幕穿透的，默认是false，所以想要拦截屏幕滑动事件，就一定要记得写这一行

 wx.hideLoading();
//想要消失就这么写

参照了大佬的教程，链接如下https://blog.youkuaiyun.com/Builder_Taoge/article/details/80514705

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hero_rong

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni.showLoading 时禁止点击（防止表单重复提交） &&小程序调取微信支付

weixin_48596030的博客

10-25

1048

uni.showLoading 时禁止点击（防止表单重复提交） && 小程序调取微信支付

【小程序】wx.showLoading()、wx.getUserInfo()

Milk~每天分享一点点，技术进步一点点

08-25

3163

wx.showLoading(Object object) 显示 loading 提示框。需主动调用 wx.hideLoading才能关闭提示框参数 Object object （红色框为常用）代码示例 wx.showLoading({ title: '加载中', mask: true }) setTimeout(function () { wx.hideLoading() }, 2000) 效果注意 wx.showLoading和wx.showToast同时只能显示

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

关于微信小程序wx.showloading（）的使用

热门推荐

qq_20411471的博客

04-27

2万+

大部分场景可能是这样的，用户点击一个按钮，界面出现“加载中...”的Loading界面，然后发送一个请求到后台，后台返回成功直接进入下一个业务逻辑处理，后台返回失败或者网络异常等情况则显示一个“系统错误”的Toast，同时一开始的Loading界面会消失。我们给出一个常见的wx.request的示例代码，如下所示。代码清单4-11 wx.request常见的示例代码 var hasClic...

微信小程序2---实现耗时操作的加载动画

涉及毕业论文、远程调试、网站、小程序、app、python、前端、pycharm、vscode等

05-13

364

微信小程序2---实现耗时操作的加载动画

微信小程序showLoading()

打不死的小五

03-15

5654

wx.showToast()和wx.showLoading

wx.showLoading() 加载框

GetcharZp的博客

01-09

2492

wx.showLoading() 显示加载框，需要主动加 wx.hideLoading() 才能隐藏样式：示例代码： wx.showLoading({ title: '加载中', }) setTimeout(function () { wx.hideLoading() }, 2000) ...

电影日历-微信小程序源码.zip

06-19

例如，使用`wx.showLoading()`和`wx.hideLoading()`来显示加载提示，或者利用微信小程序的预加载机制。综上所述，电影日历微信小程序源码不仅是一套实用的应用实例，也是学习微信小程序开发的好材料。通过研究源码...

微信小程序--API

2301_80646752的博客

03-14

1022

异步API：通常接受一个object类型参数例如 wx:request({})同步API：约定以Sync结尾例如 wx:setStorageSync()事件监听API：约定以on开头例如 wx:onAppHide()

微信小程序-图片展示（完整带后台）小程序源码

06-17

在微信小程序中，可以使用wx.request API从服务器获取图片数据，再用wx.showLoading和wx.hideLoading控制加载状态，wx.setNavigationBarTitle动态设置导航栏标题，以及wx.getImageInfo来获取图片大小和裁剪图片等。...

微信小程序：13.页面事件

饭一口口吃的博客

04-26

811

微信小程序页面事件是用户与小程序交互的桥梁，它能够将用户的操作行为如点击、滑动等传递给逻辑层，进而触发相应的处理逻辑。这些事件极大地丰富了小程序的功能，提升了用户体验。

【微信小程序】：分页请求数据、上拉加载、下拉刷新。

m0_55546349的博客

07-18

1163

微信小程序：分页请求数据、上拉加载、下拉刷新。

微信小程序显示进度条showLoading，关闭进度条hideLoading，消息提示showToast，弹出窗showModal

gdgztt的专栏

12-15

666

微信小程序显示进度条showLoading，关闭进度条hideLoading，消息提示showToast，弹出窗showModal

微信小程序显示loading效果，微信小程序节流效果，微信小程序生命周期，微信小程序组件的创建与使用

Kerwin__li的博客

01-07

5760

请求前显示loading 效果，请求结束后隐藏loading。

微信小程序showModal与showLoading配合使用

欢愉码农的博客

03-13

650

showModal与showLoading实现效果功能：显示模态对话框功能：显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框代码解析：

【微信小程序】显示自带的弹窗，包括加载中，成功，错误，提示，警告

资深全栈开发工程师

07-28

4568

方法用于显示成功、错误、提示和警告的弹窗。这些方法接受不同的参数来定制弹窗的样式和行为。你可以根据自己的需求选择适当的方法，并设置相应的参数。方法用于显示加载中的弹窗，

微信小程序开发实战：添加 loading 提示效果与上拉触底节流处理

m0_57836225的博客

01-25

1225

在微信小程序开发过程中，为了提升用户体验，常常需要添加一些交互效果，比如 loading 提示效果，以及对上拉触底进行节流处理，避免频繁请求数据。今天，就带大家详细了解这两个功能的实现方法。

微信小程序开发系列（二十九）·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框

时光の尘的博客

03-13

4482

小程序提供了一些用于界面交互的 API，例如：loading 提示框、消息提示框、模态对话框等 API。

wx.showLoading不显示

Anyuegogogo的博客

01-29

1868

wx.showLoading不显示

微信小程序在加载中时如何显示提示框？

fangqi20170515的博客

07-15

1861

链接: 微信小程序文档wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框在请求数据前使用使用wx.hideLoading()隐藏loading状态数据请求成功后使用有可能数据请求很快，看不出来加载动画，可以配合定时器的使用。...

微信小程序分类页面

最新发布

06-30

在微信小程序中开发分类页面，通常需要实现一个清晰的导航结构，让用户可以快速找到他们感兴趣的内容。分类页面一般包含顶部或侧边的分类导航栏，以及对应的分类内容展示区域。以下是具体的实现方法： ### 1. 页面结构设计分类页面通常由两个主要部分组成：分类导航和内容展示区。 - **分类导航**：可以是横向滚动的标签（Tab）或者垂直方向的菜单。 - **内容展示区**：根据用户选择的分类动态加载对应的数据并渲染视图。 #### 示例 WXML 结构 ```xml <view class="container">  <scroll-view scroll-x class="category-nav"> <block wx:for="{{categories}}" wx:key="id"> <view class="nav-item {{currentCategory === item.id ? 'active' : ''}}" bindtap="switchCategory" data-id="{{item.id}}"> {{item.name}} </view> </block> </scroll-view>  <view class="content"> <block wx:for="{{filteredItems}}" wx:key="id"> <view class="item"> <text>{{item.name}}</text> </view> </block> </view> </view> ``` #### 示例 WXSS 样式 ```css .category-nav { display: flex; overflow-x: scroll; white-space: nowrap; } .nav-item { padding: 10rpx 20rpx; margin-right: 30rpx; font-size: 28rpx; } .nav-item.active { color: #07c160; font-weight: bold; } .content .item { padding: 20rpx; border-bottom: 1rpx solid #eee; } ``` ### 2. 数据绑定与逻辑处理在 `Page` 对象中定义数据模型，并实现切换分类的方法。 #### 示例 JS 逻辑 ```javascript Page({ data: { categories: [ { id: 1, name: '电子产品' }, { id: 2, name: '服装服饰' }, { id: 3, name: '家居用品' } ], items: [ { id: 1, categoryId: 1, name: '手机' }, { id: 2, categoryId: 1, name: '笔记本电脑' }, { id: 3, categoryId: 2, name: 'T恤' }, { id: 4, categoryId: 2, name: '牛仔裤' }, { id: 5, categoryId: 3, name: '台灯' } ], currentCategory: 1, filteredItems: [] }, onLoad() { this.filterItems(this.data.currentCategory); }, switchCategory(e) { const categoryId = e.currentTarget.dataset.id; this.setData({ currentCategory: categoryId }); this.filterItems(categoryId); }, filterItems(categoryId) { const filtered = this.data.items.filter(item => item.categoryId === categoryId); this.setData({ filteredItems: filtered }); } }); ``` ### 3. 动态加载与交互优化为了提升用户体验，可以在分类切换时添加动画效果或过渡状态提示，例如“加载中…”。此外，若数据来源于远程服务器，应使用 `wx.request` 发起网络请求获取数据，并在请求过程中显示加载指示器。 #### 示例网络请求 ```javascript filterItems(categoryId) { wx.showLoading({ title: '加载中...' }); wx.request({ url: `https://api.example.com/items?categoryId=${categoryId}`, success: (res) => { if (res.statusCode === 200) { this.setData({ filteredItems: res.data }); } else { // 错误处理 console.error('请求失败', res); } }, complete: () => { wx.hideLoading(); } }); } ``` ### 4. 性能优化建议 - 使用 `wx:if` 控制某些复杂组件的渲染时机，避免不必要的渲染开销。 - 对于大量数据列表，可采用分页加载策略，结合上拉触底事件 `onReachBottom` 实现无限滚动。 - 如果分类较多，建议使用懒加载机制，仅在用户滑动到特定分类时才加载其内容。 ### 5. UI 组件库推荐如果希望快速搭建美观的分类页面，可以借助一些成熟的 UI 框架，如： - [WeUI for 小程序](https://weui.io/) - [Vant Weapp](https://vant-contrib.gitee.io/vant-weapp/#/dropdown-menu) - [MinUI](https://www.minui.org/) 这些组件库提供了丰富的导航、标签、卡片等组件，能够显著提升开发效率和视觉效果。 ---