三.分类导航

用ul，li

Navigation.wxml

<!--components/Navigation/Navigation.wxml-->
<!-- 导航-->
<view class="nav" style="margin-top:20px;"><div><ul><li>      <image src="../../pages/images/bar/jd.png" style="width: 33px; height: 30px;"></image><div>京东</div></li><li><div><image src="../../pages/images/bar/tm.png" style="width: 33px; height: 30px;"></image></div><div>天猫</div></li><li><div><image src="../../pages/images/bar/pdd.png" style="width: 33px; height: 30px;"></image></div><div>拼多多</div></li><li><div><image src="../../pages/images/bar/dw.png" style="width: 33px; height: 30px;"></image></div><div>得物</div></li></ul></div><div><ul><li><image src="../../pages/images/bar/wph.png" style="width: 33px; height: 30px;"></image><div>唯品会</div></li><li><div><image src="../../pages/images/bar/tb.png" style="width: 33px; height: 30px;"></image></div><div>淘宝</div></li><li><div><image src="../../pages/images/bar/tt.png" style="width: 33px; height: 30px;"></image></div><div>淘特</div></li><li><div><image src="../../pages/images/bar/jhs.png" style="width: 33px; height: 30px;"></image></div><div>聚划算</div></li></ul></div></view>

Navigation.wxss

/* components/Navigation/Navigation.wxss */
.item1{margin-top: 10px;text-align: center;font-size: 15px;width: 24%;display: inline-block;margin-bottom: 20px;
}
ul{width: 320px;display: block;}li{float: left;width: 25%;height: 70px;text-align: center;}li div{height: 50%;width: 100%;display: block;clear: both;}
li img{display: block;width: 33px;height: 33px;width: 100%;}

微信小程序（二）首页之分类导航相关推荐

微信小程序之网易云音乐导航
微信小程序之网易云音乐导航微信小程序之网易云音乐(一)- uni-app的基本使用微信小程序之网易云音乐(二)- uni-app标签的使用微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...
java获取微信小程序二维码
java获取微信小程序二维码近期正好遇到了,随手记录下首先获取微信小程序二维码需要小程序的appid 以及secret 然后根据appid和secret去获取小程序的token 即 access_ ...
2021-09-15核芯物联推荐生态合作伙伴莱讯科技#蓝牙AoA微信小程序跨楼层高精度定位导航，支持ibeacon+aoa融合，完美解决ibeacon导航存在的覆盖盲区
2021-09-15核芯物联推荐生态合作伙伴莱讯科技#蓝牙AoA微信小程序跨楼层高精度定位导航,支持ibeacon+aoa融合,完美解决ibeacon导航存在的覆盖盲区核芯物联推荐生态合作伙伴莱讯科 ...
隐藏微信小程序返回首页按钮（小房子）
隐藏微信小程序返回首页按钮(小房子) 之前开发小程序时会碰到用户打开非主页时,页面会显示返回首页按钮.现在可以隐藏啦!!! 需要注意的是1.调试基础库版本需要2.8.3及以上:2.以及微信7.0.7版 ...
小程序如何关联微信小程序二维码，实现二码聚合
相信大家在停车场遇到过这样的场景,在停车场入场和出场时,不管我们是用微信还是支付宝,只需台扫同一个二维码,自动识别打开各端小程序,并带入参数停车场id和通道id. 这种方式一般统称为二维码聚合或者说是 ...
JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
微信小程序二维码如何生成？
微信小程序二维码能够方便小程序的推广,那么微信小程序的二维码如何生成?微信小程序二维码都有哪些? 正式二维码在"设置"中查看小程序的正式二维码,该二维码只用于访问小程序的线上正式 ...
Java生成微信小程序二维码，5种实现方式，一个比一个简单
文章目录前言先看官网一.JDK自带的URLConnection方式二.Apache的HttpClient方式三.okhttp3方式四.Unirest方式五.RestTemplate方式 ...
小程序源码：最新wordpress黑金壁纸微信小程序二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...
最新wordpress黑金壁纸微信小程序二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...

微信小程序（二）首页之分类导航

三.分类导航

微信小程序（二）首页之分类导航相关推荐

最新文章

热门文章