免费网站维护,惠安县住房和城乡建设局网站,企业网站推广的方法有哪几种,网站怎样制作电商底部导航栏的制作
我想大家对电商一定不陌生#xff0c;一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。
app.json是用来配置page路径以及导航栏属性的#xff0c;那我们要做首页、分类、购物车、个人中心界面就要在page也添加这几个界面#xff0c;所…电商底部导航栏的制作
我想大家对电商一定不陌生一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。
app.json是用来配置page路径以及导航栏属性的那我们要做首页、分类、购物车、个人中心界面就要在page也添加这几个界面所以在app.json的page里添加如下代码写入page路径系统会自动帮你创建界面的 pages:[ pages/home/home, pages/classify/classify, pages/cart/cart, pages/mine/mine, pages/index/index ],
好既然添加了四个界面那我们要怎么做底部导航栏呐今天给app.json再添加一个属性就是可以在app.json里配置导航栏将下面代码添加到app.json里面 tabBar: { color: #858585, selectedColor: #f0145a, backgroundColor: #ffffff, borderStyle: #000, list: [ { pagePath: pages/home/home, iconPath: images/bottomNav/home.png, selectedIconPath: images/bottomNav/home_select.png, text: 首页 }, { pagePath: pages/classify/classify, iconPath: images/bottomNav/classify.png, selectedIconPath: images/bottomNav/classify_select.png, text: 分类 }, { pagePath: pages/cart/cart, iconPath: images/bottomNav/cart.png, selectedIconPath: images/bottomNav/cart_select.png, text: 购物车 }, { pagePath: pages/mine/mine, iconPath: images/bottomNav/mine.png, selectedIconPath: images/bottomNav/mine_select.png, text: 我的 } ] }
tabBar系统自带字段不可改添加这个字段就是告诉系统你要添加导航栏color、selectedColor、backgroundColor从字面意思也字段分别对应的属性是默认字体颜色、勾选字体颜色、背景颜色。着重说一下borderStyle这个的定义底部导航栏与界面的边界线属性有点特殊特殊在如果你不想要这个分界线可以把属性设置为white剩下的不管你写入的是什么系统都理解为要添加这条分界线不信你可以试试。list属性自然是设置对应导航栏的界面啦
pagePath页面路径就是你写在page里的路径iconPath默认导航栏图片路径selectedIconPath勾选图片的路径text导航栏名字
这里要说的是图片路径一定要写对不然找不到图片就显示不出来这里给大家提供我的导航栏图片---提取码8zwe 大家可以根据我的图片路径创建对应的文件夹如下图 1-1.png 需要注意的
添加tabBar的时候别忘记别忘记上面有一个逗号这个是用来区分每个属性的所以你每添加一个属性都要用逗号分隔开来这点要注意不然会报错这就是我把标点去掉的错误日志一般报出错误日志Expecting EOF XXXXXXXXXgot STRING都是语法错误所以要仔细检查看看哪里少写了东西。 1-2.png 还有就是在.json文件里是不可以写注释的我原本想添加一点注释方便读者阅读然而会出现下面错误信息解决办法很简单把注释删除就可以啦 1-3.png 举一反三 我们创建了四个导航栏那么如果我想再添加两个导航栏可以吗你也许觉得很简单试着去在list列表里添加两个了吧我也是这么做的但是出问题啦。系统会报错这回知道了吧最多只能是五个没办法谁让微信是老大人家定最多五个那就只能最多五个喽 1-3.png 不知道你有没有注意到导航栏默认首页勾选为红色那么我想要默认勾选分类为红色呐要怎么办这个有点难度了吧我刚开始想的是在tabBar属性把list里的第一个home属性和classify属性换一下应该就可以解决然而并不是这样的因为没有效果后来也是一次误打误撞给发现的我给你点小提示有没有注意到pages的第一个路径是什么pages/home/home,没错就是它如果想要分类classify作为默认的勾选项你只需要在pages属性把home的路径和classify路径换一下保存重新编译一下你要的效果就出来了这里可以总结的一点就是tabBar是到page里的第一行路径作为默认勾选项的。
电商顶部导航栏制作
既然讲了导航栏干脆今天多讲解一点接着教教大家顶部导航栏怎么制作先上效果图 2-1.png 这个导航栏可不像底部导航栏啦因为他的级别比较低是页面级别的导航栏所以要写在页面里你想要在哪个页面加入顶部导航栏就在哪个页面里添加如下代码这里以首页的界面为例home.wxss
/* pages/home/home.wxss */ page{ display: flex; flex-direction: column; height: 100%; } .navbar{ flex: none; display: flex; background: #fff; } .navbar .item{ position: relative; flex: auto; text-align: center; line-height: 80rpx; font-size:14px; } /* 顶部导航字体颜色 */ .navbar .item.active{ color: #f0145a; } /* 顶部指示条属性 */ .navbar .item.active:after{ content: ; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 6rpx; background: #f0145a; }
home.wxml
!--导航条-- view classnavbar text wx:for{{navbar}} data-idx{{index}} classitem {{currentTabindex ? active : }} wx:keyunique bindtapnavbarTap{{item}}/text /view
在home.wxml里面bindtap字段我们已经讲解过啦是事件监听的标识符事件名称叫“navbarTap”可以到home.js里查找到这个事件wx:for这个字段重点讲解在组件上使用wx:for控制属性绑定一个数组即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index数组当前项的变量名默认为item这是官方解释说白了就是item默认叫做变量的值index表示第几个变量的值还不太明白请看这个 微信 wx:for 的讲解
wx:for{{navbar}} 意思是虚幻navbar的数组数据{{item}} 这里面是navbar数组里面的值如护肤、彩妆等值wx:keyunique 来指定列表中项目的唯一的标识符data-idx{{index}} 存储一些数据供home.js里调用这里data-xxxxxx就是你给home.js里提供的数据关键词home.js通过获取xxx关键词来获取xxx里面的数据
home.js
// pages/home/home.js var app getApp() Page({ data: { navbar: [护肤, 彩妆, 香水,个人护理], currentTab: 0, }, // 导航切换监听 navbarTap: function (e) { console.debug(e); this.setData({ currentTab: e.currentTarget.dataset.idx }) }, })
home.js这里读过微信小程序入门篇二都知道page页面里.js一般是放data数据和事件监听的这里data有一个navbar导航栏数据还有一个记录当前位置的currentTab,字段可以自由命名赋值的时候对应上就好
navbarTap 记得在home.wxml里面data-idx属性吗在这里用到currentTab: e.currentTarget.dataset.idx 把当前用户选择的Tab传给currentTab里为了验证一下结果我在这里面加入了一个输出日志console.debug(e);可以在控制台上看输出的日志我选择点击彩妆输出台的数据idx1刚好是彩妆的位置。 2-2.png 总结
今天我们讲解的微信小程序的底部导航栏和顶部导航栏导航栏应该说是必须的对于电商小程序来说那么今天的导航栏教程你掌握了吗
学习过程中遇到什么问题或者想获取学习资源的话欢迎加入学习交流群343599877我们一起学前端
