微信分类栏目建立

已于 2022-06-18 16:04:20 修改
阅读量436 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 微信开放平台
于 2022-04-14 09:20:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pcccy/article/details/124163227
版权
本文详细介绍了如何在微信小程序中创建自定义的 tabBar，包括在 pages 文件夹中创建栏目项目，组织图片资源，以及在 app.json 中配置 tabBar 的各个属性如 pagePath、text、iconPath 和 selectedIconPath。通过这些步骤，你可以为小程序提供更加个性化和易于导航的底部菜单。
摘要由CSDN通过智能技术生成

目录

1、在pages中创建要新建的栏目项目

2、选择你要使用的图片，并打包成文件夹放入源文件中；右击编辑器的空白处，选择 在资源管理器中显示，将图片文件夹粘贴至与pages文件夹同级

3、在app.json中写tabBar使用快捷键敲出（tabBar的详细介绍可在微信开发文档中查看）

4、效果图

1、在pages中创建要新建的栏目项目

2、选择你要使用的图片，并打包成文件夹放入源文件中；右击编辑器的空白处，选择 在资源管理器中显示，将图片文件夹粘贴至与pages文件夹同级

3、在app.json中写tabBar使用快捷键敲出（tabBar的详细介绍可在微信开发文档中查看）

        pagePath：代表新建项目的路径

        text：类似标题

        iconPath：代表点击前的图片路径

        selectedIconPath：代表点击后的图片路径

在写多个配置时，一定要用逗号隔开，要注意路径

4、效果图

likeeefish
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于微信小程序的线上点餐平台
需要远程指导仿真实验、代码有问题的，请后台私信或者关注公众号
06-01 5906
前端采用Vue框架+后端SpringBoot
微信小程序分类栏目
Rjenny的博客
04-14 884
微信小程序分类栏目
微信实现分类模块
weixin_44291886的博客
08-03 177
像这样的分类微信小程序怎样做呢？ 当然这是两个scroll-view 首先是wxml部分 <!--pages/classify/classify.wxml--> <view class="VerticalBox"> <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:{{windowheight}}.
小程序分类功能的实现
YBWarmYoung的博客
04-02 5583
微信小程序的分类功能思路 实现思路 1.把屏幕当成一个固定的盒子，然后把盒子分成两边，并让盒子的每一边都能够滚动。 2.通过将左侧边栏元素的id和右边内容的categoryId进行匹配，渲染展示相同id的内容 页面data定义的初始数据 data: { classify_sidebar: [], //左侧边栏内容的数组 classify_content: [], //右边内容元素的数组 list: 124849, //绑定切换时的id }, 1.先利用文档对左边的侧边栏
微信小程序原生开发——商品分类左右联动页面（类似于喜茶）
weixin_43976964的博客
01-28 6297
微信原生开发商品分类左右联合滚动 首先上图看一下效果： 大概的效果就是滑动右边，左边分类会跟着滚动。点击左侧分类，右侧商品也会跟着跳到对应的分类。 类似于喜茶、瑞幸小程序那种商品分类。 .wxml <view class="bottom_menu"> <!--左侧导航栏 --> <scroll-view scroll-y="true" class="scroll_left" show-s
小程序基本命令
aiven1637的博客
10-30 3300
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
在线商城微信小程序源码.NET后台源码.zip
07-21
2、 后台系统设置：导航栏目、分类管理、 OAuth设置 、支付设置、扩展字段 、频道管理、模型管理、站点基本信息等功能设置 3、 订单管理：在线购物订单查看、发货、确认 4、 产品管理：分类管理 、产品管理 、 积分...
.NET在线购物商城微信小程序前端和后台源码
12-08
2、 后台系统设置：导航栏目、分类管理、 OAuth设置 、支付设置、扩展字段 、频道管理、模型管理、站点基本信息等功能设置 3、 订单管理：在线购物订单查看、发货、确认 4、 产品管理：分类管理 、产品管理 、 ...
在线购物商城微信小程序源码（包含前端和后台）.rar
06-19
2、 后台系统设置：导航栏目、分类管理、 OAuth设置 、支付设置、扩展字段 、频道管理、模型管理、站点基本信息等功能设置 3、 订单管理：在线购物订单查看、发货、确认 4、 产品管理：分类管理 、产品管理 、 ...
在线购物商城微信小程序前端和后台源码.zip
03-10
2、 后台系统设置：导航栏目、分类管理、 OAuth设置 、支付设置、扩展字段 、频道管理、模型管理、站点基本信息等功能设置 3、 订单管理：在线购物订单查看、发货、确认 4、 产品管理：分类管理 、产品管理 ...
小程序仿京东分类列表
06-21
仿京东分类列表
0基础学微信小程序开发基础板块初步讲解
好学而不勤问非真好学者
02-24 459
我是刚学计算机，对小程序初步的接触，初步讲解一下，我理解错的地方，大家多多包涵。希望我的讲解能帮助大家，欢迎大家在下面提出问题，我们一起成长。 首先 下载“微信web开发者工具” 添加小程序项目，项目名称 跟你之前在微信公众台 绑定的要一样，目录你自己订放在哪里，下面的APPID在我上一篇博客中说到了，在哪里找，复制过来就能创建了。 　　当创建完毕后就能进入一个小程序的界面了，我会对下面...
商城小程序（3.分类页面）
最新发布
Kiritoasu的博客
01-02 1750
商品分类页面的相关UI，功能
点餐小程序实战教程07-点餐功能开发
低代码布道师的博客
10-09 577
点击代码区，新建一个全局变量选择新建自定义变量输入变量名showlist_temp，类型选择数组本篇我们介绍了数据列表的使用，介绍了侧边选项卡和数据列表联动的效果，也介绍了数量选择效果的搭建过程。总体上如果使用组件进行编程，就是要考虑数据结构如何构造，然后算法如何实现，其实可视化编程和纯代码的编程从编程形式上并不是有太大的区别，如果非要说有区别就是低代码的组件效果是所见即所得的，纯代码每次你要编译一下在浏览器里看效果。
小程序分类页实现三级分类，顶部导航栏，左侧分类栏，右侧数据列表
热门推荐
编程小石头
03-27 1万+
如果大家一直读石头哥的文章，或者看石头哥的视频，肯定知道，石头哥的点餐小程序有实现二级菜品或者商品分类。 如下图 但是又时候我们想实现三级分类，该怎么做呢，今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库 一，老规矩，先看效果图 先来给大家分析下原理 二，原理分析 首先来分析下有那三级 可以看出，我们最顶部是一级菜单，左侧是二级菜单，右侧是最终的三级列表。 我们来理一理层级关系 =宿舍楼号 ====宿舍号 ========学生 聪明的人肯定知道，我们是一.
微信小程序开发--分类页面实现
Aurora_1970s的博客
10-24 8175
微信小程序开发–分类页面实现 之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能，接着需要在分类页面(kind.wxml)实现商品分类。 1.引入第三方组件 用到的是Tab标签页 在kind.json中写入： "usingComponents": { "van-tab": "/miniprogram_npm/@vant/weapp/tab/index", "van-tabs": "/miniprogram_npm/@vant/weapp/tabs/index"
小程序分类页面制作
不看一的博客
11-09 8661
1：页面的样式 2：数据请求 onLoad: function () { var that = this; wx.request({ url: '数据接口', data: { id: '1', position: '2', class_id: '3' }, method: '...
微信小程序三级分类
qq_45461146的博客
04-06 4474
今天，在做一个电商小程序的分类页面，要实现三级分类。首先，先上图。 要完成这样一个功能，前端的界面就不说了，具体说说怎么实现的吧，说复杂也挺复杂的，说简单只要会了思路就不难了。其实思路就是先在数据库中设计一个关于分类的数据表，数据表如下，因为本人java学的很烂，所以用的云开发，云数据库。先创建一张category表，如下图 上代码，页面布局： <view class="container"> <view class="search-header"> .
10-微信小程序商城 分类和产品 产品列表（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
杭州.黄老师
11-16 4736
产品列表 本节主要讲解产品分类右侧产品列表页面界面的实现，包含顶部查询内容布局、筛选条件布局、产品列表布局。效果如图13-3所示。 顶部查询 本节主要讲解产品分类右侧，顶部产品列表查询布局的实现。如图13-4所示。 分析结果：  第1层：整个产品列表公用的框架。  第2层：用于定义搜索总区块的背景颜色，下划线之类。  第3层：定义详细。 根据上面的布局分析，我们会产生基础的框架，代码示例如下： <view> <!—第1层-开始--> <view> &lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值