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

  
    
      
        {{ 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和組件，可以很方便地實現各種各樣的確認框和提示框。不同的場景下，選擇適當的確認框和提示框可以提升用戶體驗。