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

本文详细介绍了小程序中使用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

微信小程序中开发分类页面,通常需要实现一个清晰的导航结构,让用户可以快速找到他们感兴趣的内容。分类页面一般包含顶部或侧边的分类导航栏,以及对应的分类内容展示区域。以下是具体的实现方法: ### 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/) 这些组件库提供了丰富的导航、标签、卡片等组件,能够显著提升开发效率和视觉效果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值