Taro开发小程序填坑笔记（一）

太懒了，早就想写这个系列了，知道今天才开始动笔，暂且就从这里开始吧。

项目脚手架：Taro + TaroUI

问题：

     TaroUI的Modal弹层在软键盘弹起的时候无法被顶上去，效果图

              

去群里问了问大佬，建议说给Input的cursorSpacoing大一点的值。

代码：

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

 结果OK了。

                    

本该到此就结束了。不过那是不可能的。有小伙伴肯定发现了，我给的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发现组件有这个样式，然后就理所当然的拿到了位置信息。

                                 

到此为止问题基本解决了，关于class和className的问题也提了issue给TaroUI的官方团队，

链接地址

最后，非常感谢TaroUI团队的耐心解答，真的非常nice。

转载于:https://juejin.im/post/5bec46b95188254e3b318c9a