请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

jeesite

 找回密码
 注册新会员
查看: 226|回复: 1

小程序自定义组件tabBar

[复制链接]
admin 发表于 2018-7-10 16:32:16 | 显示全部楼层 |阅读模式
https://blog.csdn.net/qq_29729735/article/details/78933721

https://github.com/kristen154/tabbar

以下代码保存在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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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;}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

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}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

到此改组件完成,然后讲解一下使用方法。
我们先把样式载入到app.wxss

@import "/template/template.wxss";
  • 1

在index文件夹
index.wxml

<import src="../../template/template.wxml"/><template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>
  • 1
  • 2

index.js

const app = getApp()var template = require('../../template/template.js')age({  data: {  },  onLoad: function () {    template.tabbar("tabBar", 0, this)//0表示第一个tabbar  },})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

news.wxml与index.wxml一样
news.js如下

const app = getApp()var template = require('../../template/template.js')age({  data: {  },  onLoad: function () {    template.tabbar("tabBar", 1, this)//1表示第二个tabbar  },})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

效果如图

回复

使用道具 举报

 楼主| admin 发表于 2018-7-10 18:43:38 | 显示全部楼层
  1. <template name="tabBar">
  2. <view >

  3.   
  4.       <navigator  wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar" open-type="switchTab" url="{{item.pagePath}}">
  5.         <view><image class="icon" src='{{item.iconPath}}'></image></view>
  6.         <view >{{item.text}}</view>
  7.       </navigator>  


  8. </view>
  9. </template>
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册新会员

本版积分规则

QQ|手机版|小黑屋|Archiver|jeesite 官方论坛. ( 吉ICP备12004769号  

GMT+8, 2018-11-17 11:24 , Processed in 0.137695 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表