【愚公系列】《微信小程序与云开发从入门到实践》032-界面交互相关API的使用

愚公搬代码

已于 2024-12-11 19:56:56 修改

阅读量4.5w

点赞数 25

分类专栏：愚公系列-书籍专栏文章标签：微信小程序小程序

于 2024-09-18 23:21:17 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/142346327

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在数字化时代，微信小程序作为一种新兴的应用形态，凭借其轻便、易用的特性，迅速成为了各类企业和开发者的重要工具。为了提升用户体验，微信小程序提供了丰富的界面交互API，使开发者能够更灵活地设计和实现各种交互效果。

本篇文章将深入探讨微信小程序中界面交互相关API的使用，包括常见的交互组件、事件处理、动画效果等。我们将通过实际案例，帮助开发者快速掌握这些API的用法，提升小程序的交互体验和用户满意度。

🚀一、界面交互相关API的使用

🔎1.关于 Toast与Loading 组件

🦋1.1 Toast 组件

☀️1.1.1 功能说明

Toast 组件用于在界面上展示一段简短的提示信息，提示用户操作结果（如文件上传、下载是否完成等），无须用户进一步的交互。
Toast 通常会自动消失，可以设置持续时间。

☀️1.1.2 实现步骤

🌈1.1.2.1 在页面中添加按钮

在 alertDemo.wxml 中，添加一个按钮用于触发 Toast 弹窗：

<!-- pages/alertDemo/alertDemo.wxml -->
<view style="margin:20px">
  <button type="primary" bindtap="toast">弹出 Toast</button>
</view>

🌈1.1.2.2 在 `alertDemo.js` 中实现按钮的点击事件

// pages/alertDemo/alertDemo.js
Page({
   
  toast: function() {
   
    wx.showToast({
   
      title: 'Toast提示标题',  // 提示内容
      icon: 'error',           // 提示图标类型，可选值：success/error/loading/none
      duration: 5000,          // 提示持续时间，单位毫秒，默认1500ms
      mask: true               // 是否显示透明背景遮罩，防止背景被点击
    });
  }
});

☀️1.1.3 `wx.showToast` 方法的参数说明

属性名	类型	描述
`title`	字符串	设置提示框的内容
`icon`	字符串	设置提示框的图标，取值：`success`、`error`、`loading`、`none`
`image`	字符串	自定义图标，传入本地图片路径
`duration`	数值	提示框显示的时间，单位：毫秒，默认值为 1500ms
`mask`	布尔值	是否显示透明背景遮罩，防止背景被点击
`success`	函数	调用成功的回调函数
`fail`	函数	调用失败的回调函数
`complete`	函数	调用完成的回调函数

☀️1.1.4 手动隐藏 Toast

如果需要在 Toast 显示过程中手动将其消失，可以使用 wx.hideToast() 方法：

wx.hideToast({
   
  success: (res) => {
   },
  fail<

最低0.47元/天解锁文章