收藏
回答

自定义tabbar 在电脑上运行正常,但真机调试时,出现错误?

1.新建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="reLaunch" 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>

2.创建template.wxss

.icon{
  width:54rpx;
  height: 54rpx;
}
.tabBar{
  width:100%;
  position: fixed;
  bottom:0;
  padding:10rpx;
  margin-left:-4rpx;
  background:#F7F7FA;
  font-size:24rpx;
  color:#8A8A8A;
  box-shadow: 3rpx 3rpx 3rpx 3rpx #aaa; 
  z-index: 9999;
}

 .tabBar-item{
  float:left;
  width:20%;
  text-align: center;
  overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
  color:red;
}
.navigator-hover{
  background-color: rgba(0, 0, 0, 0);
}

3.创建template.js,初始化数据

//初始化数据
function tabbarinit() {
  return [
    {
      "current": 0,
      "pagePath": "/pages/dashboard/index",
      "iconPath": "/images/goback.png",
      "text": "返回商城"
    },
    {
      "current": 0,
      "pagePath": "/pages/collage/index",
      "iconPath": "/images/collage1.png",
      "selectedIconPath": "/images/collage.png",
      "text": "拼团首页"
    },
    {
      "current": 0,
      "selectedIconPath": "/images/list.png",
      "iconPath": "/images/list1.png",
      "pagePath": "/pages/collage-list/index",
      "text": "活动列表"  

    },
    {
      "current": 0,
      "selectedIconPath": "/images/collage-order.png",
      "iconPath": "/images/collage-order1.png",
      "pagePath": "/pages/collage-order/index",
      "text": "我的订单"  
    },
    {
      "current": 0,
      "selectedIconPath": "/images/group.png",
      "iconPath": "/images/group1.png",
      "pagePath": "/pages/group/index",
      "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
}

4.使用方法

  • 先把样式文件载入app.wxss
@import "/template/template.wxss";
  • 新建一个页面,比如index.wxml,引入模板
<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

  • index.js 初始化数据
var template = require('../../template/template.js');

Page({

  onLoad: function () {
    template.tabbar("tabBar", 0, this)//0表示第一个tabbar
  },
})
  • 其它新建页面也跟index.wxml一样,初始化数据。

--------------------------------------------------------------------------------------------------------------------------------------------

在电脑上运行正常,但真机调试时,出现错误: Error: module "template/template.js" is not defined

回答关注问题邀请回答
收藏

3 个回答

  • 相
    2020-07-02

    已经解决了?

    var template = require('../../template/template.js');
    
    Page({
    
      onLoad: function () {
        template.tabbar("tabBar", 0, this)//0表示第一个tabbar
      },
    })
    

    改为:

    
    Page({
    
      onLoad: function () {
    var template = require('../../template/template.js');
        template.tabbar("tabBar", 0, this)//0表示第一个tabbar
      },
    })
    
    
    就ok了
    


    2020-07-02
    有用 1
    回复
  • A notorious liar(小花猫)
    A notorious liar(小花猫)
    2020-07-02

    建议使用官方的插件,也可以把官方的插件自定义。那个还不错。可以试试

    2020-07-02
    有用
    回复
  • 微喵网络
    微喵网络
    2020-07-02

    路径问题,不要用相对路径,改成绝对路径试试

    2020-07-02
    有用
    回复
登录 后发表内容
问题标签