显示商品分类列表页面

2024-05-12 03:35:21

1.wxml页面代码：

< view class = "btn-sudoku">

< navigator url = "../listdetail/listdetail" class = "nav-item">

< image src = "../../images/type/subnav_01.png" mode = "aspectFit" class = "icon" / >

搜索

</ navigator >

< navigator url = "../listdetail/listdetail" class = "nav-item" >

< image src = "../../images/type/subnav_02.png" mode = "aspectFit" class = "icon" / >

客服

</ navigator >

< navigator url = "../listdetail/listdetail" class = "nav-item" >

< image src = "../../images/type/subnav_03.png" mode = "aspectFit" class = "icon" / >

订单

</ navigator >

< navigator url = "../listdetail/listdetail" class = "nav-item" >

< image src = "../../images/type/subnav_04.png" mode = "aspectFit" class = "icon" / >

收藏

</ navigator >

< navigator url = "../listdetail/listdetail" class = "nav-item" >

< image src = "../../images/type/subnav_05.png" mode = "aspectFit" class = "icon" / >

团购

</ navigator >

< navigator url = "../listdetail/listdetail" class = "nav-item" >

< image src = "../../images/type/subnav_06.png" mode = "aspectFit" class = "icon" / >

预售

</ navigator >

< navigator url = "../listdetail/listdetail" class = "nav-item" >

< image src = "../../images/type/subnav_07.png" mode = "aspectFit" class = "icon" / >

秒杀

</ navigator >

< navigator url = "../listdetail/listdetail" class = "nav-item" >

< image src = "../../images/type/subnav_08.png" mode = "aspectFit" class = "icon" / >

活动

</ navigator >

</ view >

2.wxss页面代码：

/* 所有分类显示 */

.btn-sudoku { display: flex ; justify-content: space-between ; flex-wrap: wrap ; background: #fff }

.btn-sudoku .nav-item { width: 25% ; text-align: center }

.btn-sudoku .icon { width: 70% ; height: 131.25 rpx ; padding: 10% 15% ;}

3.运行截图：

小程序教程地址：小程序教程集合地址

如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的，都可以可以加我订阅号，订阅号上面我会定期更新最新博客和资源。如果嫌麻烦可以直接加我wechat：lzqcode

显示商品分类列表页面相关推荐

京东商城商品分类列表页面
效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
html商品分类列表页面,仿京东商城系列7------商品分类页面
前言本文我们将一起实现一个仿京东商品分类页面.废话不说,上图: 商品分类.gif 内容商品分类展示页面涉及到的技术有Okhttp , Fresco加载机制,MaterialRefreshLayou ...
html手机显示评论列表页面,请问如何完美显示评论列表头像
目前具体思路是通过轮询构建头像,条件是通过判断评论区条目length.问题是有时依然无法显示评论区头像.以下是目前的代码: function showAvatar() { $('.feedbackIt ...
【关联字段如何在列表中显示】查询车间列表页面中，显示关联的公司（company）字段
车间列表显示的隶属公司字段是company_id,该字段是公司表中的主键. 如何修改,让它显示公司表中的 company_name,而不是显示company_id. 这个功能,需要作两表的关联查询,查 ...
实战SSM_O2O商铺_41【前端展示】店铺列表页面Dao+Service+Controller层的实现
文章目录概述 Dao层接口映射文件单元测试 Service层接口方法单元测试 Controller层增加 ShopListController 单元测试 Github地址概述在完成了 ...
Django项目实践（商城）：十五、商品列表页面
(根据居然老师直播课内容整理) 一.商品列表页面分析 1.商品频道分类 -已经在"首页广告""首页商品频道分类"中实现,将相关代码封装到contents.uti ...
SpringMVC框架学习DAY_01:框架概括 / 简易应用 / 核心执行流程图 /在框架下显示HTML模板页面/ 接受请求
1. SpringMVC框架的作用 MVC = Model(数据模型) + View(视图) + Controller(控制器) SpringMVC框架主要解决了接收请求与处理响应的问题,也可以认为是 ...
Xamarin.FormsShell基础教程（4）Shell项目内容列表页面运行效果
Xamarin.FormsShell基础教程(4)Shell项目内容列表页面运行效果在创建好Shell解决方案后,就可以运行程序了.本小节将讲解运行后的效果. 内容列表页面运行程序,初始效果如图1 ...
实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现
文章目录概述代码结构 shoplist.html shoplist.js shoplist.css common.js添加解析日期的公共方法 FrontEndController添加路由联调测试 ...

最新文章

热门文章