养猪网站建设规划书,三亚网上商城,潜江做网站的公司,谷歌广告推广网站首先需要注册和登录ifconfont官网#xff0c;然后创建项目添加需要的图标 创建和添加图标库请参考#xff1a;Uniapp在Vue环境中引入iconfont图标库#xff08;详细教程#xff09;
打开iconfont官网#xff0c;找到之前添加的图标库#xff0c;下载png图片 如果需要的…首先需要注册和登录ifconfont官网然后创建项目添加需要的图标 创建和添加图标库请参考Uniapp在Vue环境中引入iconfont图标库详细教程
打开iconfont官网找到之前添加的图标库下载png图片 如果需要的图标没有背景色图怎么办可以使用ps进行填充
使用PS打开png图片用吸管获取原图标颜色然后使用魔术棒进行填充此处使用PS2023版本也可以自己使用画图工具填充背景 使用魔棒选中需要填充的部分
点击编辑选择填充
边框缝隙会有空白再次选择外边框进行填充 此时可以看到图标底色已经填充完成 另存为png图标给图标加入fill开头保存 重复上述步骤依次完成对图标填充即可 在static文件夹下新建tabbar文件夹存放底部导航栏图片。将已经得到的icon图片拉入 在pages下新建index、class、cart、my四个页面 打开pages.json文件将之前测试用的test页面放入最下方uniapp会根据数组配置顺序进行页面启动默认第一个页面是首页在使用tabbar后首页必须和第一页对应实际项目开发中建议页面顺序也对应好标题页也和内容相对应方便后期维护。 在pages.json文件添加tabbar底部导航栏属性包括页面路径、页面标题、未选择时图标无底色、选择时图标有底色
注意如果此处底部导航栏无法显示请检查页面路径和图片路径是否都设置正确如果有一个设置错误将无法正常运行。 tabBar: {color: #7A7E83,selectedColor: #3cc51f,borderStyle: black,backgroundColor: #ffffff,list: [{pagePath: pages/index/index,text: 首页,iconPath: static/tabbar/shouye.png,selectedIconPath: static/tabbar/fill-shouye.png}, {pagePath: pages/class/class,text: 分类,iconPath: static/tabbar/fenlei.png,selectedIconPath: static/tabbar/fill-fenlei.png}, {pagePath: pages/cart/cart,text: 购物车,iconPath: static/tabbar/gouwuche.png,selectedIconPath: static/tabbar/fill-gouwuche.png}, {pagePath: pages/my/my,text: 我的,iconPath: static/tabbar/wode.png,selectedIconPath: static/tabbar/fill-wode.png}]}保存执行到微信小程序查看效果
