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

微信小程序自定义tabBar组件开发

E企盈小程序直播系统

以下代码保存在github地址:https://github.com/kristen154/tabbar 先看一看目录 template文件夹里存放tabbar模板。 template/template.wxml<template name=”tabBar”><view class=”tabBar”>  <block wx:for=”{{tabBar}}” wx:for-item=”item” wx:key=”tabBar”>    <view class=”tabBar-item”>      <navigator open-type=”redirect” url=”{{item.pagePath}}”>        <view><image class=”icon” src='{{item.iconPath}}’></image></view>        <view class=”{{item.current== 1 ? ‘tabBartext’ :”}}”>{{item.text}}</view>      </navigator>      </view>  </block></view></template>template.css.icon{  width:54rpx;  height: 54rpx;}.tabBar{  width:100%;  position: fixed;  bottom:0;  padding:10rpx;  margin-left:-4rpx;  background:#F7F7FA;  font-size:20rpx;  color:#8A8A8A;  box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;} .tabBar-item{  float:left;  width:25%;  text-align: center;  overflow: hidden;}/*当前字体颜色*/.tabBartext{  color:red;}template.js//初始化数据function tabbarinit() { return [      { “current”:0,        “pagePath”: “/pages/index/index”,        “iconPath”: “/imgs/home.png”,        “selectedIconPath”: “/imgs/home_on.png”,        “text”: “主页”      },      {        “current”: 0,        “pagePath”: “/pages/news/news”,        “iconPath”: “/imgs/message.png”,        “selectedIconPath”: “/imgs/message_on.png”,        “text”: “资讯”      },      {        “current”: 0,        “pagePath”: “/pages/category/category”,        “iconPath”: “/imgs/category.png”,        “selectedIconPath”: “/imgs/category_on.png”,        “text”: “分类”      },      {        “current”: 0,        “pagePath”: “/pages/buy/buy”,        “iconPath”: “/imgs/buy.png”,        “selectedIconPath”: “/imgs/buy_on.png”,        “text”: “购物”      }    ]}//tabbar 主入口function tabbarmain(bindName = “tabdata”, id, target) {  var that = target;  var bindData = {};  var otabbar = tabbarinit();  otabbar[id][‘iconPath’] = otabbar[id][‘selectedIconPath’]//换当前的icon  otabbar[id][‘current’] = 1;  bindData[bindName] = otabbar  that.setData({ bindData });}module.exports = {  tabbar: tabbarmain}到此改组件完成,然后讲解一下使用方法。 我们先把样式载入到app.wxss@import “/template/template.wxss”;在index文件夹 index.wxml<import src=”../../template/template.wxml”/><template is=”tabBar” data=”{{tabBar:bindData.tabBar}}”/>index.jsconst app = getApp()var template = require(‘../../template/template.js’);Page({  data: {  },  onLoad: function () {    template.tabbar(“tabBar”, 0, this)//0表示第一个tabbar  },})news.wxml与index.wxml一样 news.js如下const app = getApp()var template = require(‘../../template/template.js’);Page({  data: {  },  onLoad: function () {    template.tabbar(“tabBar”, 1, this)//1表示第二个tabbar  },})效果如图

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序自定义tabBar组件开发
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏