E企盈营销工具技术服务商 热线:4006-838-530

微信小程序底部导航栏小效果

E企盈直播平台营销卖货系统

废话不多说,先上个效果图,值得一看就往下看,因为基本上也没什么难度。 上图实现5个导航页面事件,首先在阿里巴巴的图标库下载10个图标,分别为5个导航事件的选中效果和未选中效果,蓝底图和灰底图。阿里巴巴图标库连接:https://www.iconfont.cn/ 项目配置文件app.json文件下添加以下代码”tabBar”: {    “color”: “#707070”,    “selectedColor”: “#1296db”,    “borderStyle”: “white”,    “list”: [      {        “selectedIconPath”: “images/ic_bottom_blue_home.png”,        “iconPath”: “images/ic_bottom_gray_home.png”,        “pagePath”: “pages/home/home”,        “text”: “首页”      },      {        “selectedIconPath”: “images/ic_bottom_blue_activity.png”,        “iconPath”: “images/ic_bottom_gray_activity.png”,        “pagePath”: “pages/activity/activity”,        “text”: “活动”      },      {        “selectedIconPath”: “images/ic_bottom_blue_release.png”,        “iconPath”: “images/ic_bottom_gray_release.png”,        “pagePath”: “pages/release/release”,        “text”: “发布”      },      {        “selectedIconPath”: “images/ic_bottom_blue_brand.png”,        “iconPath”: “images/ic_bottom_gray_brand.png”,        “pagePath”: “pages/brand/brand”,        “text”: “品悦”      },      {        “selectedIconPath”: “images/ic_bottom_blue_my.png”,        “iconPath”: “images/ic_bottom_gray_my.png”,        “pagePath”: “pages/my/my”,        “text”: “我的”      }    ]  }属性说明:color:未选中时字符颜色selectedColor:选中时字符颜色borderStyle:导航栏背景颜色selectedIconPath:选中后显示的图片路径iconPath:未选中时显示的图片路径pagePath:导航页面路径注意:一定要在pages下配置分别页面路径,否则导航栏将不起效果。 如下图:如此,整个效果就OK了。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序底部导航栏小效果
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏