在浏览器就好使，在微信开发者工具界面就不行
代码就是示例代码
<template>
<view>
<view class="title">{{title}}</view>
<view>
<grid col="4" title="四栏组名称">
<grid-item order="1" iconImg="/static/logo.png" url="" text="第一格"></grid-item>
<grid-item order="0" iconFont="comment" url="" dot text="dot"></grid-item>
<grid-item order="3" iconImg="/static/logo.png" url="" text="第三格"></grid-item>
<grid-item order="2" iconFont="audio" url="" badge="99+" text="badge"></grid-item>
</grid>
<grid col="-10" title="最少栏数的效果">
<grid-item order="1" badge="15" iconImg="/static/logo.png" url="" text="第二格"></grid-item>
<grid-item order="0" dot iconFont="shop" url="" text="第一格"></grid-item>
</grid>
<grid title="不设置栏数的默认效果">
<grid-item order="1" badge="8" iconImg="/static/logo.png" url="" text="第3格"></grid-item>
<grid-item order="0" dot iconFont="photo" url="" text="第2格"></grid-item>
<grid-item order="3" iconImg="/static/logo.png" url="" text="第5格"></grid-item>
<grid-item order="4" iconFont="scan" url="" text="第6格"></grid-item>
<grid-item order="-1" iconImg="/static/logo.png" url="" text="第1格"></grid-item>
<grid-item order="2" iconFont="setting" url="" text="第4格"></grid-item>
</grid>
<grid col="7" border="false" title="最多栏数去边线效果">
<grid-item order="2" badge="99+" iconImg="/static/logo.png" url="" text="第三格"></grid-item>
<grid-item order="1" dot iconFont="send-gift" url="" text="第二格"></grid-item>
<grid-item order="0" iconImg="/static/logo.png" url="" text="第一格"></grid-item>
<grid-item order="3" iconImg="/static/logo.png" url="" text="第五格"></grid-item>
<grid-item order="4" iconFont="question" url="" text="第四格"></grid-item>
</grid>
</view>
</view>
</template>
<script>
</script>
<style>
</style>
