用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序编写tabBar模板,map组件markers属性动态初始化

天下雪 2017-2-4 00:20

作者:阿灿,来自授权地址一:编写tabBar模板众所周知,微信小程序的tabBar都是新开页面的,而微信文档上又表明了最多只能打开5层页面。这样就很容易导致出问题啦,假如我的tabBar有5个呢?下面是微信原话:一个应用 ...

作者:阿灿,来自授权地址

一:编写tabBar模板

众所周知,微信小程序的tabBar都是新开页面的,而微信文档上又表明了最多只能打开5层页面。这样就很容易导致出问题啦,假如我的tabBar有5个呢?下面是微信原话:

一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo

因此这几天想着根据微信tabBar数组来自定义模板供页面调用。不过我在list里面每个对象都增加了一个selectedColor和active属性,方便对每个tabBar当前页做样式,如果不传直接使用设置的selectedColor。因此这串数据只能设定在各个页面下,不能设定在公用的app.js配置文件下,稍微有点代码冗余,下次研究下怎么直接配置到app.js完善下。

只要新建一个tarBar.wxml模板页,然后引用模板的页面传入数据即可,代码如下:

  1. <template name="tabBar">
  2. <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 + ';') : ''}}">
  3. <block wx:for="{{tabBar.list}}" wx:key="pagePath">
  4. <navigator url="{{item.pagePath}}" open-type="redirect" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">
  5. <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image>
  6. <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image>
  7. <text>{{item.text}}</text>
  8. </navigator>
  9. </block>
  10. </view>
  11. </template>

接下来进行测试,首先是index.js的配置对象:

  1. //配置tabBar
  2. tabBar: {
  3. "color": "#9E9E9E",
  4. "selectedColor": "#f00",
  5. "backgroundColor"赞赏
    鲜花
    鲜花 (2)
    鸡蛋
    鸡蛋 (2)

    刚表态过的朋友 (4 人)

    分享至 : QQ空间
    收藏

    相关阅读

    • from风 2017-8-15 10:17
      我怎么就不信这个marker能实现