發(fā)布初衷 ：

記錄在移動(dòng)端項(xiàng)目中使用 Vant  2 組件庫時(shí)遇到的各種問題 ，

方便以后再次遇到類似問題 ， 能夠快時(shí)查閱解決 

Popup 彈出層

介紹

彈出層容器，用于展示彈窗、信息提示等內(nèi)容，支持多個(gè)彈出層疊加展示。

問題記錄 ： Field 輸入框 和 Popup 彈出層  兩個(gè) 結(jié)合 使用 時(shí) ，

在 iPhone 真機(jī)上測(cè)試的時(shí)候 出現(xiàn)的一個(gè)小 bug ：

點(diǎn)擊 Field 輸入框 的時(shí)候 ， 第一次會(huì) 彈出 一個(gè) 手機(jī)的鍵盤輸入框 ，

點(diǎn)擊第二次的時(shí)候 才出來  Popup 彈出層 里面的內(nèi)容 （ 比如 日期選擇器 ）

解決方案 ： 

    給 Field 輸入框 設(shè)置 readonly ，通過 readonly 將輸入框設(shè)置為只讀狀態(tài)

輸入框 van-field 必須得加入 readonly 這個(gè) 只讀屬性 ,

不然會(huì)導(dǎo)致 用戶手機(jī) 觸發(fā) 默認(rèn)鍵盤 遮擋 你的彈窗和選擇器內(nèi)容 影響體驗(yàn)

也不要用 disabled 來禁用輸入框 , 樣式會(huì)變成禁用狀態(tài)下的樣式很難改動(dòng)

只需要設(shè)置為只讀即可 , 也不會(huì)觸發(fā)手機(jī)鍵盤

DatetimePicker 時(shí)間選擇

介紹

時(shí)間選擇器，支持日期、年月、時(shí)分等維度，通常與彈出層組件配合使用。

確認(rèn)選擇的時(shí)間數(shù)據(jù)是需要自己處理的，詳見 confirmPicker 方法 

<template>
  <div class="seller">
    <van-cell
      title="開始時(shí)間"
      is-link
      :value-class="className"
      :value="timeValue"
      @click="showPopup" />
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="選擇時(shí)間"
        :loading="isLoadingShow"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="show = false"
        @confirm="confirmPicker"
      />
    </van-popup>
  </div>
</template>
 
<script>
export default {
  name: 'Seller',
  data () {
    return {
      msg: '商家頁面',
      timeValue: '請(qǐng)選擇時(shí)間',
      show: false,
      isLoadingShow: true,
      currentDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2020, 12, 31),
      className: ''
    }
  },
  methods: {
    // 顯示彈窗
    showPopup () {
      this.show = true
      this.isLoadingShow = true
      setTimeout(() => {
        this.isLoadingShow = false
      }, 500)
    },
    // 確認(rèn)選擇的時(shí)間
    confirmPicker (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
      this.className = 'timeClass'
      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`
      this.show = false
    },
    // 選項(xiàng)格式化函數(shù)
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}時(shí)`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    }
  }
}
</script>
 
<style lang="stylus" rel="stylesheet/stylus" scoped>
.seller
  .timeClass {
    color: #333;
  }
</style>

Field 輸入框

介紹

表單中的輸入框組件。

問題記錄 ： Field 輸入框 和 Popup 彈出層  兩個(gè) 結(jié)合 使用 時(shí) ，

在 iPhone 真機(jī) 上測(cè)試的時(shí)候 出現(xiàn)的一個(gè)小 bug ：

點(diǎn)擊 Field 輸入框 的時(shí)候 ， 第一次會(huì) 彈出 一個(gè) 手機(jī)的鍵盤輸入框 ，

點(diǎn)擊第二次的時(shí)候 才出來  Popup 彈出層 里面的內(nèi)容 （ 比如 日期選擇器 ）

解決方案 ： 

    給 Field 輸入框 設(shè)置 readonly ，通過 readonly 將輸入框設(shè)置為只讀狀態(tài)

輸入框 van-field 必須得加入 readonly 這個(gè) 只讀屬性 ,

不然會(huì)導(dǎo)致 用戶手機(jī) 觸發(fā) 默認(rèn)鍵盤 遮擋 你的彈窗和選擇器內(nèi)容 影響體驗(yàn)

也不要用 disabled 來禁用輸入框 , 樣式會(huì)變成禁用狀態(tài)下的樣式很難改動(dòng)

只需要設(shè)置為只讀即可 , 也不會(huì)觸發(fā)手機(jī)鍵盤

Picker 選擇器

介紹

提供多個(gè)選項(xiàng)集合供用戶選擇，支持單列選擇和多列級(jí)聯(lián)，通常與彈出層組件配合使用。

業(yè)務(wù)場景 ：

一開始以為只能渲染純數(shù)組

但后來用的時(shí)候 ， 后端返回來的數(shù)據(jù)結(jié)構(gòu)是 數(shù)組嵌套對(duì)象的模式 ，

因此還特意將數(shù)組對(duì)象里面的數(shù)據(jù)專門篩選出來一個(gè)新數(shù)組用于渲染。。

但后來傳參的時(shí)候需要數(shù)據(jù)結(jié)構(gòu)里面的其他數(shù)據(jù)用于傳參

所以又找了找這個(gè)Picker選擇器可不可以渲染數(shù)組對(duì)象結(jié)構(gòu)的案例 ：

發(fā)現(xiàn) [ {  } ]  , 是可以渲染的 ，只不過還要做一下處理 ：

使用案例 ：

<van-popup
  v-model="showTitle"
  position="bottom"
>
  <van-picker
    title="標(biāo)題"
    show-toolbar
 
    value-key="name"
 
    :columns="columns"
    @confirm="onConfirm"
    @cancel="onCancel"
  />
</van-popup>

export default {
  data() {
    return {
      showTitle: false,
      columns: [], // 后端請(qǐng)求的數(shù)據(jù)
      queryFrom: {
        id: null,
        name: '',
      }
    };
  },
  methods: {
    onConfirm(value, index) {
      this.queryFrom.id = value.id // 需要傳給后端的id值
      this.queryFrom.name = value.name // 用于渲染選擇器列表數(shù)據(jù)
      this.showTitle = false // 關(guān)閉彈出層
    },
    onCancel() {
      this.showTitle = false
    },
  },
};

補(bǔ)充知識(shí) ：

vant-ui 之 Field 輸入框 和 Picker 結(jié)合使用時(shí) ，如何綁定正確的 id 類型的值的問題 。

很常見的需求 ：

表單中的一項(xiàng) ，需要從 picker 控件中選擇正確的值后 ，展示的是字符串 ，

然后提交到后臺(tái)服務(wù)器的則是字符串對(duì)應(yīng)的 value 類型的值的問題。

點(diǎn)擊表單的檔案組，彈出 Picker 選擇組件 ，選擇正確的值 ，填充到表單項(xiàng) ，但是 ，

提交到服務(wù)器去，需要提交對(duì)應(yīng)的 id ，而不是看到的字符串。

如何實(shí)現(xiàn) ？

定義兩個(gè)屬性，id 和 name ， 兩個(gè)是一 一對(duì)應(yīng)的關(guān)系 。

在 van-picker 中 ，綁定的 confirm 函數(shù) ，參數(shù)獲取到的是一個(gè)對(duì)象 

在這個(gè)函數(shù)內(nèi)，同時(shí)更新 id 和 name ，保證他倆一 一對(duì)應(yīng) 。

  onConfirm(value, index) {
    this.queryFrom.id = value.id // 需要傳給后端的id值
    this.queryFrom.name = value.name // 用于渲染選擇器列表數(shù)據(jù)
    this.showTitle = false // 關(guān)閉彈出層
  },

如何展示 默認(rèn)選中項(xiàng)

項(xiàng)目使用背景 ：

用戶填寫表單時(shí) ， 需要根據(jù)上面填寫的 乘車人數(shù) 來自動(dòng)讓下面的 Picker 選擇器

下拉時(shí) 默認(rèn)值 展示 與 人數(shù)相匹配 的 車輛類型

而又由于車輛類型是后端返回的數(shù)據(jù) ， 并不是固定不變的 ， 所以前端沒辦法寫死匹配方法

1、用戶輸入完 乘車人數(shù) 后 ， 自動(dòng)發(fā)起請(qǐng)求 ， 由后端來匹配相對(duì)應(yīng)的車輛類型

2、但是這里前端 Picker 組件需要用其索引值來展示下拉默認(rèn)值 ， 后端又無法返給我索引

3、前端這里只能先請(qǐng)求車輛類型數(shù)據(jù)列表后 ， 再請(qǐng)求匹配車型數(shù)據(jù)值 ， 循環(huán)去匹配后拿到當(dāng)前匹配的索引值后再賦值給 Picker 組件

代碼實(shí)現(xiàn) ：

根據(jù)乘車人數(shù)展示默認(rèn)選中項(xiàng)
<van-picker
  show-toolbar
  title="車輛類型"
  value-key="dictLabel"
  :default-index="defaultMatch"
  :columns="applyType"
/>
 
data() {
  return {
    defaultMatch: 0, // 車輛類型下拉展示默認(rèn)索引值
    applyType: [], // 車輛類型列表
  }
}
 
methods: {
  // 根據(jù)乘車人數(shù)自動(dòng)匹配車輛類型
  async blurMatchType() {
  let arr = []
  // 先請(qǐng)求車輛類型列表數(shù)據(jù)用于匹配
  let res = await this.getDicts('car_apply_type')
  if (res.code == 200) arr = res.data
  // 根據(jù)乘車人數(shù)請(qǐng)求匹配的車輛類型值
  let ret = await getMatchType(this.userCarForm.riderNum)
  const { code, data } = ret
  if (code == 200) {
      // 循環(huán)匹配后賦值其索引值
      arr.forEach((item, index) => {
        if (item.dictValue == data) {
          this.defaultMatch = index
        }
      })
    }
  }
}

List 列表

介紹

瀑布流滾動(dòng)加載，用于展示長列表，當(dāng)列表即將滾動(dòng)到底部時(shí)，會(huì)觸發(fā)事件并加載更多列表項(xiàng)。

List 組件通過 loading 和 finished 兩個(gè)變量控制加載狀態(tài)，當(dāng)組件滾動(dòng)到底部時(shí)，會(huì)觸發(fā) load 事件并將 loading 設(shè)置成 true。

此時(shí)可以發(fā)起異步操作并更新數(shù)據(jù)，數(shù)據(jù)更新完畢后，將 loading 設(shè)置成 false 即可。

若數(shù)據(jù)已全部加載完畢，則直接將 finished 設(shè)置成 true 即可。

<van-list
  v-model="loading"
  :finished="finished"
  :finished-text="appList.length ? '沒有更多了' : ''"
  @load="onLoad"
>
  <van-cell v-for="item in appList" :key="item" :title="item" />
</van-list>
 
export default {
  data() {
    return {
      loading: false,
      finished: false,
      appList: [], // 用車申請(qǐng)列表
      appQuery: {
        page: '1', // 要查詢的頁碼
        rows: '10', // 每頁記錄數(shù)量
        userId: null, // 用戶 Id
      }
    };
  },
  methods: {
    async onLoad() {
      // 異步更新數(shù)據(jù)
      let ret = await getAppList(this.appQuery)
      const { code, data } = ret
      if (code == 200) {
        this.appList = this.appList.concat(data.rows)
        // 加載狀態(tài)結(jié)束
        this.loading = false;
        if (this.appList.length >= data.total) {
          // 沒有更多數(shù)據(jù)了
          this.finished = true;
          Notify({
            message: '已加載完全部訂單'，
            background: '#ee0a24'
          })
        } else {
          this.appQuery.page++
        }
      }
    },
  },
};

以上是正常情況下 ， onLoad 滾動(dòng)到底部可以正常觸發(fā)加載下一頁數(shù)據(jù)

接下來就是說明一個(gè)不正常使用情況 ， 此 bug 組件庫還未修復(fù)

就是 和 Tab 標(biāo)簽頁 組件 公用 ：

我猜估計(jì)是包裹內(nèi)容的高度它無法斷定了吧 ， 所以 onLoad 加載就有問題了

Tab 標(biāo)簽頁

<van-tabs v-model="active">
  <van-tab title="標(biāo)簽 1">
    <ApprovalItem type='1' />
  </van-tab>
  <van-tab title="標(biāo)簽 2">
    <ApprovalItem type='2' />
  </van-tab>
  <van-tab title="標(biāo)簽 3">
    <ApprovalItem type='3' />
  </van-tab>
  <van-tab title="標(biāo)簽 4">
    <ApprovalItem type='4' />
  </van-tab>
</van-tabs>
 
data() {
  return {
    active: 2,
  };
},

主要注意點(diǎn)就是子組件的高度需要設(shè)置一下 ，

一開始嘗試的給 ApprovalItem 子組件一個(gè)高度  height：100% ，

但并沒有解決一直觸發(fā) onLoad 加載的問題 ，

后來改成  height：100vh  ， 就 OK 了 。。

沒別的了 ， 就是記錄一下 ， 提醒避坑 。

總結(jié)

到此這篇關(guān)于Vant2移動(dòng)端Vue組件庫問題記錄的文章就介紹到這了,更多相關(guān)Vant2移動(dòng)端Vue組件庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論