这种菜单叫什么?相对的标签是什么?怎么用?求大佬解析

小程序 文章 2021-03-02 13:41 388 0 全屏看文

AI助手支持GPT4.0

这种菜单叫什么?相对的标签是什么?怎么用?求大佬解析What is this menu called? What is the relative label? how to use? Ask the big guy to analyze

这种菜单叫什么?相对的标签是什么?怎么用?求大佬解析





回答:

默垂眸:

自己用view+image+wxss搭建

清风.:那个线怎么写...第一次接触这种
默垂眸:border 或者用个这么宽的view做线 实现方式很多 看你用哪种了
默垂眸:可以参考此贴中的组件库 里面都会有九宫格的组件 稍微改改 自己想要的效果就行
https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13
清风.:好的,谢谢大佬,受教了
绿水青山:

可以使用weui里面的grid进行修改;或者自己写;

线是写在::before ::after里的;

<view class="weui-grids">		<view class="weui-grid">			<view class="weui-grid__icon">				<image src="../images/icon_tabbar.png" alt></image>			</view>			<view class="weui-grid__label">Grid</view>		</view>		<view class="weui-grid">			<view class="weui-grid__icon">				<image src="../images/icon_tabbar.png" alt></image>			</view>			<view class="weui-grid__label">Grid</view>		</view>		<view class="weui-grid">			<view class="weui-grid__icon">				<image src="../images/icon_tabbar.png" alt></image>			</view>			<view class="weui-grid__label">Grid</view>		</view>		<view class="weui-grid">			<view class="weui-grid__icon">				<image src="../images/icon_tabbar.png" alt></image>			</view>			<view class="weui-grid__label">Grid</view>		</view>	</view>


.weui-grid:before {    content: " ";    position: absolute;    right: 0;    top: 0;    width: 1px;    bottom: 0;    border-right: 1px solid rgba(0,0,0,0.1);    border-right: 1px solid var(--weui-FG-3);    color: rgba(0,0,0,0.1);    color: var(--weui-FG-3);    -webkit-transform-origin: 100% 0;    transform-origin: 100% 0;    -webkit-transform: scaleX(0.5);    transform: scaleX(0.5);}.weui-grid:after {    content: " ";    position: absolute;    left: 0;    bottom: 0;    right: 0;    height: 1px;    border-bottom: 1px solid rgba(0,0,0,0.1);    border-bottom: 1px solid var(--weui-FG-3);    color: rgba(0,0,0,0.1);    color: var(--weui-FG-3);    -webkit-transform-origin: 0 100%;    transform-origin: 0 100%;    -webkit-transform: scaleY(0.5);    transform: scaleY(0.5);}


张有釜:

view 和 image

清风.:没有这种单独标签吗
张有釜:这个需要系统看一下前端的内容 如果时间不够 还是用别人已经做好的组件来搭建吗

-EOF-

AI助手支持GPT4.0