无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(微信小程序弹窗) 微信小程序四种弹窗方式实例 微信小程序中的四种弹窗方式 全网首发(图文详解1)

前沿技术 Micheal 1个月前 (06-12) 25次浏览 已收录 扫描二维码

(微信小程序弹窗) 微信小程序四种弹窗方式实例

微信小程序中,常用的四种弹窗方式分别是:模态弹窗(Modal)、底部弹窗(ActionSheet)、自定义弹窗、Toast。下面,我将详细介绍这四种弹窗的使用方法和实现流程。

1. 模态弹窗(Modal)

模态弹窗用来提示用户进行操作确认或展示重要信息,用户需要操作弹窗才能进行下一步。

实现方式:

在你的.js文件中,添加如下方法:

showModal: function() {
  wx.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success (res) {
      if (res.confirm) {
        // 用户点击了确定
        console.log('用户点击确定')
      } else if (res.cancel) {
        // 用户点击了取消
        console.log('用户点击取消')
      }
    }
  })
}

在你的.wxml文件中可以通过按钮触发:

<button bindtap="showModal">显示模态弹窗</button>

2. 底部弹窗(ActionSheet)

底部弹窗用于显示一组动作菜单列表。

实现方式:

在你的.js文件中,添加如下方法:

showActionSheet: function() {
  wx.showActionSheet({
    itemList: ['A', 'B', 'C'],
    success (res) {
      console.log(res.tapIndex)
    },
    fail (res) {
      console.log(res.errMsg)
    }
  })
}

同样,在.wxml文件中可以通过按钮触发:

<button bindtap="showActionSheet">显示底部弹窗</button>

3. 自定义弹窗

自定义弹窗允许开发者自定义弹窗的布局和样式。

实现方式:

可以通过在.wxml中定义弹窗的布局和样式,用变量控制其显示与隐藏。

.wxml文件:

<view class="modal" hidden="{{!modalShow}}">
  <!-- 弹窗内容 -->
  <view class="modal-content">这是一个自定义弹窗</view>
  <view class="modal-footer">
    <button bindtap="hideModal">确定</button>
  </view>
</view>

.js文件:

Page({
  data: {
    modalShow: false
  },
  showModal: function() {
    this.setData({
      modalShow: true
    })
  },
  hideModal: function() {
    this.setData({
      modalShow: false
    })
  }
})

4. Toast

Toast用于显示一些信息,显示后会自动消失,不会影响用户的操作。

实现方式:

在你的.js文件中,添加如下方法:

showToast: function() {
  wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
  })
}

可以通过按钮在.wxml中触发。

每种弹窗方式根据实际需求选择使用,自定义弹窗为最灵活的方式,其他三种为微信小程序提供的方便快捷的方式。
(mysql offset) mysql中的limit和offset用法详解 MySQL LIMIT 和 OFFSET 的使用与实现分页 全网首发(图文详解1)
(无效的源发行版) IDEA报错:无效的源发行版解决方案 无效源发行版错误处理 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝