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

这篇具有很好参考价值的文章主要介绍了微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

目录

1.  loading 提示框

1. 1  wx.showLoading()显示loading提示框

1.2  wx.hideLoading()关闭 loading 提示框

2.  showModal 模态对话框

3.  showToast 消息提示框


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

1.  loading 提示框

loading 提示框常配合网络请求来使用,用于增加用户体验,对应的API 有两个:

1. wx.showLoading()显示loading提示框

2. wx.hideLoading()关闭 loading 提示框

1. 1  wx.showLoading()显示loading提示框

        找到 index.js文件,添加代码:

    // 显示 loading 提示框
    wx.showLoading({
      title: '数据正在加载中...',
    })

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        完整的index.js代码:


Page({

  data:{
    List:[]
  },
  // 获取数据
  getData(){

    // 显示 loading 提示框
    wx.showLoading({
      title: '数据正在加载中...',
    })

    // 如果需要发起网络请求,需要使用 wx.request API
    wx.request({
      // 接口地址
      url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
      // 请求方式
      method:"GET",
      // 请求参数,若没有则为空,什么也不写
      data:{},
      // 请求头,这里不需要暂时不写
      header:{},
      // API 调用成功以后,执行的回调
      success:(res)=>{
        // console.log(res)
        if(res.data.code == 200){
          this.setData({
            List: res.data.data
          })
        }
      },
      // API 调用失败以后,执行的回调
      fail:(err)=>{
        console.log(err)
      },
      //  API 无论成功或者失败,执行的回调
      complete:(res)=>{
        console.log(res)
      }
    })

  }
})

        根据上图我们会发现,并没有将“数据正在加载...”中的三个点加载出来,那是因为提示的内容不会自动换行,如果提示的内容比较多,因为在同一行展示,多出来的内容就会被隐藏掉,我们可以将数据放的少一点,来进行解决:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        不过此时,我们再次点击“获取数据”会发现,仍能进行点击:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        那是因为此时的mask默认为:false

        在小程序开发中,mask: false 是指定一个布尔值的属性,用于控制页面中的遮罩层是否显示。当 mask 的取值为 false 时,表示不显示遮罩层;而当 mask 的取值为 true 时,表示显示遮罩层。
        遮罩层通常用于在某些操作(如加载数据、等待用户确认等)进行时,阻止用户对页面进行交互,同时提供视觉上的提示。通过控制 mask 属性,开发者可以灵活地控制页面中遮罩层的显示与隐藏,以提升用户体验和交互效果。

        此时的代码可以理解为:

    // 显示 loading 提示框
    wx.showLoading({
      title: '数据加载中...',
      // 是否展示透明蒙层,防止触摸穿透
      mask: false
    })

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        将false改为true,则点击一次后,会出现透明蒙层,无法在进行点击:

    // 显示 loading 提示框
    wx.showLoading({
      title: '数据加载中...',
      // 是否展示透明蒙层,防止触摸穿透
      mask: true
    })

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

1.2  wx.hideLoading()关闭 loading 提示框

        打开折叠的 wx.request 函数,找到complete更改其内容:

      complete:(res)=>{
        // console.log(res)
        // 关闭 Loading 提示框
        wx.hideLoading()
      }

        则会发现,点击完后,展示内容,提示框关闭:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

注意:hideLoading和showLoading必须结合、配对使用。

2.  showModal 模态对话框

wx.showModal():模态对话框,常用于询问用户是否执行一些操作。

例如:询问用户是否退出登录、是否删除该商品等。

        找到index.wxml文件,创建一个按钮:

<button type="primary" bind:tap="delHandler">删除商品</button>

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        找到index.js文件,给按钮添加相关属性:

  // 删除商品
  async delHandler(){
    
    // showModal 显示模态对话框
    const res = await wx.showModal({
      title: '提示',
      content: '是否删除该商品?'
    })

    console.log(res)
  }

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

         点击“删除商品”:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        点击“取消”:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        点击“确定”:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

3.  showToast 消息提示框

wx.showToast():消息提示框,根据用户的某些操作来告知操作的结果。

例如:退出成功给用户提示,提示删除成功等。

        编写代码:

  // 删除商品
  async delHandler(){
    
    // showModal 显示模态对话框
    const { confirm } = await wx.showModal({
      title: '提示',
      content: '是否删除该商品?'
    })
    // console.log(res)
    if(confirm){
      // showToast消息提示框
      wx.showToast({
        title: '删除成功',
        // 不显示图标
        icon:"none",
        // 消息提示框两秒后自动关闭
        duration:2000
      })
    }else{
      wx.showToast({
        title: '取消删除',
        icon:"error",
        // 消息提示框两秒后自动关闭
        duration:2000
      })
    }
  }

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        点击取消:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

        点击确定:

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript

微信小程序开发_时光の尘的博客-CSDN博客

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框,微信小程序开发,微信小程序,小程序,物联网,java,stm32,交互,javascript文章来源地址https://www.toymoban.com/news/detail-843204.html

到了这里,关于微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序开发】小程序的事件处理和交互逻辑(最详细)

    在微信小程序中,事件处理和交互逻辑是开发过程中非常重要的环节,它们直接影响到用户体验和功能实现。今天为大家继续详解小程序的事件处理和交互逻辑 事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因: 提升用户体验:良好的事件处理和

    2024年02月08日
    浏览(85)
  • 微信小程序开发系列-07组件

    《微信小程序开发系列-01创建一个最小的小程序项目》 《微信小程序开发系列-02注册小程序》 《微信小程序开发系列-03全局配置中的“window”和“tabBar”》 《微信小程序开发系列-04获取用户图像和昵称》 《微信小程序开发系列-05登录小程序》 《微信小程序开发系列-06事件

    2024年02月03日
    浏览(52)
  • 微信小程序开发教程:在小程序中,打开企业微信的在线客服聊天界面

    在微信小程序中打开企业微信在线客服聊天界面,我们需要用到wx.openCustomerServiceChat(),它是微信小程序提供的一个API,用于打开企业微信的在线客服聊天界面。 下面是官方给的示列: extInfo  是一个对象,可以传递一些额外的信息。在这里, url 为空,表示没有传递额外的信

    2024年02月03日
    浏览(56)
  • 微信小程序开发--利用和风天气API实现天气预报小程序

    本来是参照《微信小程序开发实战》做一个天气预报小程序的,实际运行的时候提示错误,code 400,参数错误。说明问题应该出在查询API的语句上,没有返回结果。 查阅后才知道,可能书籍出版时间较早,现在的和风获取天气的API出现了一些调整,具体见实时天气 for API | 和

    2023年04月27日
    浏览(88)
  • 微信小程序开发教学系列(12)- 实战项目案例

    本章将通过一个简单的实战项目案例来帮助读者巩固之前学习到的知识。我们将搭建一个名为“ToDoList”的微信小程序,实现一个简单的任务清单功能。 ToDoList是一个用于记录和管理任务的小程序。用户可以添加、编辑、完成和删除任务,以及查看任务清单。 功能需求 显示任

    2024年02月11日
    浏览(56)
  • 微信小程序开发如何开启地图定位(个人开发版)(连接第三方百度地图api)

    目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品 在微信公众平台 选择开发工具可开启腾讯位置服务 之后便可以在 设置--第三方设置中添加自己所需要的腾讯地图插件 因为我做的小程序中需要用到地图选点功能 但是在安装 地图选点插件

    2024年02月11日
    浏览(44)
  • 微信小程序开发教学系列(9)- 小程序页面优化

    在开发小程序时,页面性能优化是非常重要的一项任务。优化页面性能可以提升用户体验,使小程序更加流畅和高效。本章将介绍一些常见的页面优化方法和技巧,帮助您提升小程序的性能。 页面性能优化的目标是减少页面加载时间和提升页面渲染速度,从而提供更好的用户

    2024年02月11日
    浏览(46)
  • 微信小程序开发教学系列(3)- 页面设计与布局

    在微信小程序开发中,页面的设计和布局是非常重要的。一个好的页面设计可以提升用户体验,并使小程序更加吸引人。本章节将介绍如何设计和布局微信小程序的页面。 3.1 页面结构和样式的创建和设置 在创建微信小程序页面时,需要先定义页面的结构和样式。可以通过以

    2024年02月11日
    浏览(43)
  • 【微信小程序开发】一文带你详解小程序组件和 API 的使用

    在小程序开发中,组件和API是非常重要的部分,它们可以帮助我们构建丰富的用户界面和实现各种功能。本文将介绍小程序中常用的组件和API,并提供相应的代码示例。 小程序的组件是构建用户界面的基本元素。它们可以用于展示数据、接收用户输入、实现交互等。 下面是

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包