uniapp确认框综述

小蓝 • 2024-12-23 13:06 • 编程

一、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的使用方法：


  
    
      
        {{ array[index] }}
      
      
        
          {{ item }}
        
      
    
  



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

八、uniapp底部弹出框

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

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

九、uniapp搜索框

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


  
    
  



.search-box {
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 8px;
}
input {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  border: none;
  background-color: #f5f5f5;
  border-radius: 6px;
}

十、uniapp弹出选择框选取

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

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

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

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286961.html