<text class="mi">expand_more</text>
会展示为
一个向下的小箭头,但是uniapp使用 boundingClientRect 获取节点信息宽度时,
本来一个小箭头的宽度是 10px,但是获取节点信息是会按expand_more这串英文计算宽度,获取宽度,会是90px左右。
von4xj4u1#
<view> <text class="mi">expand_more</text> <text class="mi">expand_more</text> <text class="mi">expand_more</text> </view>
let query = uni.createSelectorQuery().in(this) query.selectAll(`.mi`).boundingClientRect((res: any) => { res.forEach(item => { console.log(item.width) }) }) query.exec()
/* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); } .mi { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
或者
https://fonts.googleapis.com/icon?family=Material+Icons
但是 mi的类名要改成 material-icons
1条答案
按热度按时间von4xj4u1#
或者
https://fonts.googleapis.com/icon?family=Material+Icons
但是 mi的类名要改成 material-icons