微信小程序自定义底部加背景图片
作者：广州小程序开发 时间:2018-05-03 00:47
最近在开发一个人才市场的微信小程序，小程序底部是这样的效果，如下图
小程序底部tab加个背景图片，看了小程序的文档，发现backgroundColor 这个不能添加背景图片
所以要实现这个只能自定义写了。
方法：
首先在pages同等级目录下创建一个template目录 目录里面新建 三个文件 分别命名为tabbar.js
tabbar.wxml,tabbar.wxss
tabbar.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="{{item.pagetype}}" url="{{item.pagePath}}">
<view><image class="foot-icon" src='{{item.iconPath}}'></image></view>
<view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
</navigator>
</view>
</block>
</view>
</template>
tabbar.wxss 代码如下：
.foot-icon{
width:50rpx;
height: 43rpx;
display: inline-block;
}
.tabBar{
width:100%;
position: fixed;
bottom:0;
padding:20rpx 10rpx 10rpx 10rpx;
background: url('https://www.shanshuijv.com/images/tab-bg.png') no-repeat;
font-size:28rpx;
color:#fff;
background-size: 100% 100%;
}
.tabBar-item{
float:left;
width:25%;
text-align: center;
overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
color:#444;
}
这里背景图片加在tabBar，小程序背景图片不能直接写本地的路径，只能写64位或者远程地址的图片。
tabbar.js文件
//初始化数据
function tabbarinit() {
return [
{
"current": 0,
"pagePath": "/pages/index/index",
"pagetype": "redirect",
"iconPath": "/images/icon_home.png",
"selectedIconPath": "/images/icon_home.png",
"text": "主页"
},
{
"current": 0,
"pagePath": "/pages/postjob/postjob",
"pagetype": "navigate",
"iconPath": "/images/icon_fabu.png",
"selectedIconPath": "/images/icon_fabu.png",
"text": "发布"
},
{
"current": 0,
"pagePath": "/pages/job/findjob/findjob",
"pagetype": "redirect",
"iconPath": "/images/icon_job.png",
"selectedIconPath": "/images/icon_job.png",
"text": "找工"
},
{
"current": 0,
"pagePath": "/pages/member/index/index",
"pagetype": "navigate",
"iconPath": "/images/icon-my.png",
"selectedIconPath": "/images/icon-my.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
}
这里要注意的是pagetype，这个是指的 跳转链接类型 redirect 和navigate 是跳转的时候一个有返回的一个没有。
然后在公共css引入css
在需要的页面引用模板
<import src="../../../template/tabbar.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>
在页面的js
var template = require('../../template/tabbar.js');
onLoad方法里加入里
template.tabbar("tabBar", 0, this);//0表示第一个tabbar
上一篇：微信小程序地区三级联动地址选择器的实例
下一篇：关于小程序获取用户信息的方法
在线咨询