微信小程序自定义选项卡tabBar模板底部顶部导航

图集1/8

正文 14456字数 1,247,823阅读

小程序让每个页面都有tabbar 选项卡导航

1.创建模板文件

\pages\template\tabBar.wxml

Run code

Cut to clipboard

tabBar.wxml文件代码

<template name="tabBar">  
  <view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">  
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">  
    <navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">  
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>  
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>  
      <text>{{item.text}}</text>  
    </navigator>  
    </block>  
  </view>  
</template>

Run code

Cut to clipboard

2.引入模板文件
在需要使用模板的页面 .wxss文件中import进来；
或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用再引入

以about.wxml页面为例

<!--pages/about/about.wxml-->

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

Run code

Cut to clipboard

about.js

App.editTabBar(this);//添加tabBar数据

Run code

Cut to clipboard

3.修改app.js文件

注意前后逗号

  //修改tabBar的active值  
  editTabBar: function (that) {
    
    var tabBar = that.data.tabBar;

    var pages = getCurrentPages() //获取加载的页面
    var currentPage = pages[pages.length - 1] //获取当前页面的对象
    var url = '/'+currentPage.route //当前页面url

    
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == url) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态  
      }
    } 
    
    that.setData(that.data);
    //that.setData(tabBar); 这样页面不会渲染新数据
    //console.log(that.data);

  }

Run code

Cut to clipboard

4.配置页面导航内容

注意在头部写入

var App = getApp();

Run code

Cut to clipboard

配置tabBar

    //配置tabBar  
    tabBar: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "首页",
          "iconPath": "/img/1.png",
          "selectedIconPath": "/img/2.png",
          "active": false
        },
        {
          "pagePath": "/pages/about/about",
          "text": "关于我们",
          "iconPath": "/img/1.png",
          "selectedIconPath": "/img/2.png",
          "selectedColor": "#4EDF80",
          "active": false
        },
        {
          "pagePath": "/pages/logs/logs",
          "text": "日志",
          "iconPath": "/img/1.png",
          "selectedIconPath": "/img/2.png",
          "selectedColor": "#4EDF80",
          "active": false
        }
      ],
      "position": "bottom"
    }

Run code

Cut to clipboard

5.tabBar全局样式

app.wxss 添加到文件末尾即可

/*写了全局的的*属性，*=page，因此下面針對page配置就没反应了*/

page, view {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #333;
  background: none;
  text-align: left;
}

page {
  height: 100%;
  font-family: "Microsoft Yahei";
  background: #f4f8fb;
}


/* 父元素-横向排列（主轴） */

.flex-h {
  display: box; /* OLD - Android 4.4- */
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ *//* 09版 */
  -webkit-box-orient: horizontal;
  /* 12版 */
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

/* 父元素-水平两端对齐（主轴是横向才生效） */

.flex-hsb {
  /* 09版 */
  -webkit-box-pack: space-between;
  /* 12版 */
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  /* 其它取值如下：
    align-items     主轴原点方向对齐
    flex-end        主轴延伸方向对齐
    space-between   等间距排列，首尾不留白
    space-around    等间距排列，首尾留白
   */
}

/* 父元素-水平居中（主轴是横向才生效） */

.flex-hc {
  /* 09版 */
  -webkit-box-pack: center;
  /* 12版 */
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  /* 其它取值如下：
		align-items	 主轴原点方向对齐
		flex-end		主轴延伸方向对齐
		space-between   等间距排列，首尾不留白
		space-around	等间距排列，首尾留白
	 */
}

/* 父元素-纵向排列（主轴） */

.flex-v {
  display: box; /* OLD - Android 4.4- */
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ *//* 09版 */
  -webkit-box-orient: vertical;
  /* 12版 */
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

/* 父元素-竖直居中（主轴是横向才生效） */

.flex-vc {
  /* 09版 */
  -webkit-box-align: center;
  /* 12版 */
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}


/*tabBar*/

.tab-bar {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100rpx;
  /*line-height: 100rpx;*/
  font-size: 22rpx;
  color: #9b9b9b;
  background: #fff;
  text-align: center;
}

.tab-bar .menu-item {
  display: block;
  flex: 1;
  /*width: 33.3%;*/
  height: 100%;
}

.tab-bar .menu-item image {
  margin: 10rpx auto 0 auto;
  display: block;
  width: 50rpx;
  height: 50rpx;
}

.tab-bar .menu-item.active {
  color: #53df87;
}

Run code

Cut to clipboard

示例源码下载

6.全局配置tabBar
如果多个页面共用tabBar配置文件，则按以下方式修改编写

a.修改app.js
tabBar 配置写在globalData里面

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log(res.code);
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  //修改tabBar的active值  
  editTabBar: function (that) {
    
    var tabBar = this.globalData.tabBar;

    var pages = getCurrentPages() //获取加载的页面
    var currentPage = pages[pages.length - 1] //获取当前页面的对象
    var url = '/'+currentPage.route //当前页面url

    
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == url) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态  
      }
    } 
    
    that.setData(this.globalData);
    //that.setData(tabBar); 这样页面不会渲染新数据
    //console.log(that.data);

  },
  globalData: {
    userInfo: null,
    //配置tabBar  
    tabBar: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "首页",
          "iconPath": "/img/1.png",
          "selectedIconPath": "/img/2.png",
          "active": false
        },
        {
          "pagePath": "/pages/about/about",
          "text": "关于我们",
          "iconPath": "/img/1.png",
          "selectedIconPath": "/img/2.png",
          "selectedColor": "#4EDF80",
          "active": false
        },
        {
          "pagePath": "/pages/logs/logs",
          "text": "日志",
          "iconPath": "/img/1.png",
          "selectedIconPath": "/img/2.png",
          "selectedColor": "#4EDF80",
          "active": false
        }
      ],
      "position": "bottom"
    }
  }
})

Run code

Cut to clipboard

b.以about页面为例

1.创建模板文件
2.引入模板文件
5.tabBar全局样式
这三步骤不变，跟上面一样

Run code

Cut to clipboard

about.js文件修改为删除data里面的配置数据

新增修复是否当前页面自定义tabBar配置文件还是全局文件

c.是否页面自定义配置

//修改tabBar的active值  
  editTabBar: function (that) {
    
    var tabBar = this.globalData.tabBar;

      //新增如果是页面自定义配置
    if (that.data.tabBar) tabBar = this.globalData.tabBar;

    var pages = getCurrentPages() //获取加载的页面
    var currentPage = pages[pages.length - 1] //获取当前页面的对象
    var url = '/'+currentPage.route //当前页面url

    
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == url) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态  
      }
    } 
    //新增如果是页面自定义配置
    if (that.data.tabBar) that.setData(that);
    else that.setData(this.globalData);
    
    //that.setData(tabBar); 这样页面不会渲染新数据
    //console.log(that.data);

  }

Run code

Cut to clipboard

微信小程序-template模板使用

7.模板

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板；
2、新建一个courseList.wxml文件来定义模板；
3、使用name属性，作为模板的名字。然后在<template/>内定义代码片段。

注意：
a.可以看到一个.wxml文件中可以定义多个模板，只需要通过name来区分；
b.模板中的数据都是展开之后的属性。

<template name="courseLeft">
    <navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
        <view class="item mr26">
            <image src="{{imagePath}}" mode="aspectFill"></image>
            <view class="course-title">
                <text class="title">{{courseName}}</text>
                <text class="author">- {{teacherName}}</text>
            </view>
            <view class="course-info clearfix">
                <view class="fl"><text class="play">{{playCount}}</text></view>
                <view class="fr"><text class="grade">{{score}}</text></view>
            </view>
            <view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
        </view>
    </navigator>
</template>

<template name="courseRight">
    <navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
        <view class="item">
            <image src="{{imagePath}}" mode="aspectFill"></image>
            <view class="course-title">
                <text class="title">{{courseName}}</text>
                <text class="author">- {{teacherName}}</text>
            </view>
            <view class="course-info clearfix">
                <text class="play fl">{{playCount}}</text>
                <text class="grade fr">{{score}}</text>
            </view>
            <view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
        </view>
    </navigator>
</template>

Run code

Cut to clipboard

二、使用模板

1、使用 is 属性，声明需要的使用的模板

<import src="../../templates/courseList.wxml"/>

Run code

Cut to clipboard

2、将模板所需要的 data 传入，一般我们都会使用列表渲染。

<block wx:for="{{courseList}}">
    <template is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}" data="{{...item}}"></template>
</block>

Run code

Cut to clipboard

注意：
a.可以通过表达式来确定使用哪个模板

is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"

Run code

Cut to clipboard

或者通过

wx:if

Run code

Cut to clipboard

来确定。index是数组当前项的下标。

<template wx:if="{{index%2 === 0}}" is="courseLeft" data="{{...item}}"></template>
<template wx:else is="courseRight" data="{{...item}}"></template>

Run code

Cut to clipboard

b. data 是要模板渲染的数据，

data="{{...item}}"

Run code

Cut to clipboard

写法是ES6的写法，item是wx:for当前项，... 是展开运算符，在模板中不需要再

{{item.courseName}}

Run code

Cut to clipboard

而是直接{{courseName}} 。

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件，与CSS同样的写法控制样式。
2、在需要使用模板的页面 .wxss文件中import进来；
或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了。

@import "../template/courseList.wxss";

Run code

Cut to clipboard

参考：
http://blog.csdn.net/eadio/article/details/54405594
http://blog.csdn.net/u013778905/article/details/59646241 tabbar.rar

微信小程序获取当前页面的路径的方式
使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options

Run code

Cut to clipboard

微信小程序遇到修改数据后页面不渲染的问题解决 setData 修改页面
要调用一下setData()方法

Run code

Cut to clipboard

有过 5 条评论 »

广西南宁市 2018-01-04, 16:36:18

小程序不支持DOM和BOM操作，所有逻辑都需要通过数据驱动
1.css方案

<view class="{{isFold ?'flod':'extend' }}" bindtap="flodFn">
    我是一个很长的文字
</view>
.flod{
    //折叠样式
}
.extend{
    //展开样式
}
flodFn:function(){
    this.setData({
       isFold: !this.isFold 
    });
}

2.动态渲染方案

<view bindtap="flodFn">
<view wx:if="{{isFold}}" >
    我是一个很长的文字
</view>
<view wx:else>
    我是一个很长的文字
</view>
</view>
flodFn:function(){
    this.setData({
       isFold: !this.isFold 
    });
}

显示被隐藏的元素，并隐藏已显示的元素

$("button").click(function(){
  $("p").toggle();
});

reply | quote | #¹

广西南宁市 2018-01-04, 17:06:21

// pages/about/about.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "content": '广西南宁共振广告有限公司，2008年成立于南宁，是一家以“品牌咨询+品牌设计+品牌策划+品牌落地”于一体的品牌服务平台，通过360°全景式纵深品牌打造，从品牌标识设计、VI设计、空间设计、包装、海报等多维度构建完善的品牌价值链，致力于以实战服务中国企业，以品牌推动中国成长。公司创立至今，已是当之无愧的品牌实战专家，客户涵盖国内外地产、金融、IT、汽车、服装时尚、奢侈品、能源、机械、快速消费品等各行业著名的企业，深受客户信赖。我们坚持以实力深耕市场，力求达成艺术与商业之间、客户与市场之间、虚拟与现实之间的价值共生，将企业打造成为一个能为客户提供综合化',
    "content2": '更换内容21321',
    "content3": '2222222222222更换内容21321'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  //更换内容
  getnewcontent:function(n){
    var cc = (n.currentTarget.dataset.c);
    var ncc ='content'+cc;
    console.log(ncc);
    this.setData({
      "content": this.data[ncc],
    })
  }

})

#,广西南宁市,2018-01-04,17:06:34,

<!-------------banner 开始-------------->
<image style='width:100%;' src='../../images/ab0.png' mode="widthFix" ></image>
<!-------------banner 结束-------------->


<view class="about" style="background:url('https://hhh.liangtianmei.com/images/bjjj.png');">
  <!-------------标题 开始-------------->
  <view class='title'>
    <view class='zuo'>
      <view class='xian'></view>
      <view class='yuan'>●</view>
    </view>

    <view class='wz'>
      <text class='yw'>ABOUT SU\n</text>
      <text class='zw'>关于我们\n</text>
    </view>

    <view class='you'>
      <view class='yuan'>●</view>
      <view class='xian'></view>
    </view>
  </view>
  <!-------------标题 结束-------------->

  <!-------------导航 开始-------------->
    <view class='nav'>


      <view class='meiyi'>
        <view class='dg' bindtap="getnewcontent" data-c='2'>
          <image src='../../images/ab2.gif' mode="widthFix"></image>\r\n
          <text>公司介绍</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab3.gif' mode="widthFix"></image>\r\n
          <text>公司理念</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab4.gif' mode="widthFix"></image>\r\n
          <text>核心优势</text>
        </view>

        <view class='dg'>
          <image src='../../images/ab5.gif' mode="widthFix"></image>\r\n
          <text>公司使命</text>
        </view>
      </view>
    </view>
  <!-------------导航 结束-------------->



  <!-------------图文 开始-------------->
    <view class='nr'>
      <image src='../../images/ab1.png' mode="widthFix"></image>
      <text>{{content}}</text>
    </view>
  <!-------------图文 结束-------------->

</view>

#,广西南宁市,2018-01-04,17:07:20, Javascript中解析json时key为变量

alert(json.lastMonth[dep]);

使用中括号的方式就可以用变量key值
js json键名变量
js变量名变量

reply | quote | #²

广西南宁市 2018-01-04, 17:19:37

<template name="tabBar">  
  <view class="flex-h flex-hsb tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">  
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">  
    <navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">  
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>  
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>  
      <text style="color:{{item.selectedColor}}" wx:if="{{item.active}}">{{item.text}}</text> 
      <text style="color:{{item.color}}" wx:if="{{!item.active}}">{{item.text}}</text>  
    </navigator>  
    </block>  
  </view>  
</template>

reply | quote | #³

广西南宁市 2019-02-21, 15:06:14

微信小程序placeholder设置自定义颜色

 <view class='inp'>
       <input placeholder-class="phcolor" class="input-text" name="username" placeholder="测试placeholder" />
 </view>

.phcolor{
    color: #18acff;
}

reply | quote | #⁴

广西南宁市 2019-05-22, 09:00:58

微信小程序顶部任务状态栏自定义标题栏计算公式：

const MenuRect = wx.getMenuButtonBoundingClientRect()
const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height +MenuRect.top

#,广西南宁市,2019-05-24,14:26:00, 根据条件有选择性的改变
假设某种情况要根据条件改变某个特定值的某个属性，那么就需要先将要改变的属性转换成字符串，再用中括号括起来

//此例假设改变对应index的某个属性值
var temp_str='this.data.family['+index+'].age';
this.setData({
	[temp_str]:44
});

#,广西南宁市,2019-05-28,08:59:12,

npm run build -- --watch

vue自动编译 vue运行后没有实时编译解决

# 安装依赖
# 注意：请切换到子目录下安装
npm install

# 本地开发
# 通过 localhost:8080 访问页面
npm run serve

# 生产环境构建
npm run build

# 代码格式校验
npm run lint

reply | quote | #⁵

Records:5 1/1 «‹1 ›»

lizhenqiu blog

微信小程序自定义选项卡tabBar模板底部顶部导航

相关日志

有过 5 条评论 »

留下評論