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

我只用大寶發表於2018-11-15
筆記

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

專案腳手架：Taro + TaroUI

問題：

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

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

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

程式碼：

<AtInput             
    value={key_word}            
    focus={focus}          
    cursor={cursor}        
    adjustPosition        
    cursorSpacing={150}        
    clear            
    onChange={this.changeBookName}  
/>複製程式碼

 結果OK了。

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

本該到此就結束了。不過那是不可能的。有小夥伴肯定發現了，我給的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發現元件有這個樣式，然後就理所當然的拿到了位置資訊。


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

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

連結地址

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


相關文章