Taro開發小程序填坑筆記（一）

太懶了，早就想寫這個系列了，知道今天才開始動筆，暫且就從這裏開始吧。

項目腳手架：Taro + TaroUI

問題：

TaroUI的Modal彈層在軟鍵盤彈起的時候無法被頂上去，效果圖

         ![圖片描述][1]

去羣裏問了問大佬，建議說給Input的cursorSpacoing大一點的值。

代碼：

<AtInput                
    value={key_word} 
    focus={focus}
    cursor={cursor}
    adjustPosition
    cursorSpacing={150}
    clear
    onChange={this.changeBookName}
/>

結果OK了。

                ![圖片描述][2]

本該到此就結束了。不過那是不可能的。有小夥伴肯定發現了，我給的cursorSpacing是定值，在適配機型的時候肯定不合適，所以我們需要拿到Modal的位置信息，Taro文檔裏給出了拿到組件或DOM實例的api，

Taro.createSelectorQuery()

代碼：

const query = Taro.createSelectorQuery()
                      .select('.add_book_modal') 
                      .boundingClientRect();   
   query.exec(res => { console.log(res, 'modal'); });

res就是我們能拿到的組件實例信息，但是我在調試的時候打印出來的確實['null']，

查看wxml發現我的className屬性根本就沒有賦到組件上

<AtModal
          isOpened={showAdd}
          ref={modal => (this.addBookModal = modal)}
          className="add_book_modal"
          class="add_book_modal">
          <AtModalContent>
            <View className="add-book-header">
              <Text style={{ textAlign: 'center', fontSize: '26px' }}>書籍信息</Text>
            </View>
            <AtForm>
              <Text>書籍名</Text>
              <AtInput
                value={key_word}
                focus={focus}
                cursor={cursor}
                adjustPosition
                cursorSpacing={150}
                clear
                onChange={this.changeBookName}
              />
              <Text>作者</Text>
              <AtInput clear adjustPosition />
            </AtForm>
          </AtModalContent>
          <AtModalAction>
            <Button style="background-color:#6190E8;color:#fff;border:0;outline:0;" onClick={this.closeModal}>
              取消
            </Button>
            <Button style="background-color:#6190E8;color:#fff;border:0;outline:0;" onClick={this.closeModal}>
              確定
            </Button>
          </AtModalAction>
        </AtModal>

這是整個Modal組件，可以看到我在Modal上給了一個className，不過無效，後來我又想到TaroUI文檔裏說如果想要自定義樣式的話可以給組件一個class，覆蓋組件樣式，我就試着給Modal一個class，查看wxml發現組件有這個樣式，然後就理所當然的拿到了位置信息。

               ![圖片描述][3]
                             

到此爲止問題基本解決了，關於class和className的問題也提了issue給TaroUI的官方團隊，

鏈接地址

最後，非常感謝TaroUI團隊的耐心解答，真的非常nice。