您的位置:

uniapp确认框综述

一、uniapp确认框是反的

在uniapp中,与其他框架/库不同的是,确认框的cancel和confirm是相反的。即cancel是确定,confirm是取消,这一点需要事先注意,以免在使用时出现误操作。

uni.showModal({
  title: '警告',
  content: '是否确定要删除该内容?',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else {
      console.log('用户点击取消')
    }
  }
})

二、uniapp确认框提示

uni.showModal可以用来做提示框,用于显示特定的信息或者做一些简单的操作。可以设置title和content的内容。

uni.showModal({
  title: '提示',
  content: '这是一条提示信息',
  showCancel: false,
  confirmText: '知道了'
})

三、uniapp是框架吗

uniapp是一个基于Vue.js的跨平台框架,可以实现一套代码运行在多个平台,包括但不限于微信小程序、H5、安卓和苹果APP等。其中uni.showModal是uniapp框架中的API,可以在各个平台上使用。

四、uniapp模态框

uniapp中还有其他类型的模态框,包括loading框、进度提示框、toast、actionsheet等,比如以下是loading框的使用方法:

uni.showLoading({
  title: '加载中'
})
// 三秒后隐藏 loading
setTimeout(function () {
  uni.hideLoading()
}, 3000)

五、uniapp知识点框架

uniapp涵盖了前端多个知识点和技能,包括但不限于Vue.js框架、HTML5、CSS3、JavaScript、AJAX、HTTP、响应式布局、DOM、Flexbox布局、小程序原理等。

六、uniapp提示框

除了uni.showModal之外,uniapp中还有uni.showToast和uni.showActionSheet等提示框,分别用来做简单的弹出消息和底部弹出框的选择。以下是toast的使用方法:

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

七、uniapp下拉选择框

除了uni.showActionSheet之外,uniapp中还可以使用Picker组件来做下拉选择框,除了选择器的基本功能外,还可以对选择器各项文字和选择器的颜色进行自定义。以下是Picker的使用方法:

  

<script>
export default {
  data() {
    return {
      array: ['选项一', '选项二', '选项三', '选项四'],
      index: 0
    }
  },
  methods: {
    onChange(e) {
      console.log(e)
      this.index = e.detail.index
    }
  }
}
</script>

八、uniapp底部弹出框

uniapp中还可以使用uni.showActionSheet来做底部弹出框的选择,支持多项选择和单项选择两种模式。以下是单项选择模式的使用方法:

uni.showActionSheet({
  itemList: ['选项一', '选项二', '选项三', '选项四'],
  success: function (res) {
    console.log(res.tapIndex)
  }
})

九、uniapp搜索框

可通过在input标签上添加type="search"来实现搜索框效果,也可以使用自定义组件等方式实现,以下是普通的input标签使用:

  


十、uniapp弹出选择框选取

uniapp中除了可以使用Picker组件来做下拉选择框之外,还可以使用uni.chooseImage来做弹出选择框选取图片等功能。以下是选择图片的使用方法:

uni.chooseImage({
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    console.log(res.tempFilePaths)
  }
})

以上就是uniapp确认框的相关内容,通过不同的API和组件,可以很方便地实现各种各样的确认框和提示框。不同的场景下,选择适当的确认框和提示框可以提升用户体验。