uni-ui 演示
uni-ui 文档
搭建
创建项目的时候选择uni-ui组件,在项目中就可以直接使用了
案例
<view class="gridView">
<uni-grid :column="4" :showBorder="false" >
<uni-grid-item>
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="box-text">钱包</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="box-text">订单</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="box-text">优惠券</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="box-text">积分</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="box-text">VIP</text>
</view>
</uni-grid-item>
<uni-grid-item>
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="box-text">邀请好友</text>
</view>
</uni-grid-item>
</uni-grid>
</view>