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

2023-12-27 22:48
文章标签 动态 模板 程序 组件 微信 编写 属性 初始化 map tabbar markers

本文主要是介绍微信小程序编写tabBar模板，map组件markers属性动态初始化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一：编写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": "#fff",  
  6.       "borderStyle": "#ccc",  
  7.       "list": [  
  8.         {  
  9.           "pagePath": "/pages/index/index",  
  10.           "text": "主页",  
  11.           "iconPath": "../../img/tabBar_home.png",  
  12.           "selectedIconPath": "../../img/tabBar_home_cur.png",  
  13.           //"selectedColor": "#4EDF80",  
  14.           active: true  
  15.         },  
  16.         {  
  17.           "pagePath": "/pages/village/city/city",  
  18.           "text": "目的地",  
  19.           "iconPath": "../../img/tabBar_village.png",  
  20.           "selectedIconPath": "../../img/tabBar_village_cur.png",  
  21.           "selectedColor": "#4EDF80",  
  22.           active: false  
  23.         },  
  24.         {  
  25.           "pagePath": "/pages/mine/mine",  
  26.           "text": "我的",  
  27.           "iconPath": "../../img/tabBar_mine.png",  
  28.           "selectedIconPath": "../../img/tabBar_mine_cur.png",  
  29.           "selectedColor": "#4EDF80",  
  30.           active: false  
  31.         }  
  32.       ],  
  33.       "position": "bottom"  
  34.     }
复制代码
index.wxml引入模板：
  1. <import src="../../template/tabBar.wxml" />  
  2. <template is="tabBar" data="{{tabBar: tabBar}}" />  
复制代码
接下来是mine.js文件引入配置对象：
  1. //配置tabBar  
  2.     tabBar: {  
  3.       "color": "#9E9E9E",  
  4.       "selectedColor": "#f00",  
  5.       "backgroundColor": "#fff",  
  6.       "borderStyle": "#ccc",  
  7.       "list": [  
  8.         {  
  9.           "pagePath": "/pages/index/index",  
  10.           "text": "主页",  
  11.           "iconPath": "../../img/tabBar_home.png",  
  12.           "selectedIconPath": "../../img/tabBar_home_cur.png",  
  13.           //"selectedColor": "#4EDF80",  
  14.           active: false  
  15.         },  
  16.         {  
  17.           "pagePath": "/pages/village/city/city",  
  18.           "text": "目的地",  
  19.           "iconPath": "../../../img/tabBar_village.png",  
  20.           "selectedIconPath": "../../../img/tabBar_village_cur.png",  
  21.           "selectedColor": "#4EDF80",  
  22.           active: false  
  23.         },  
  24.         {  
  25.           "pagePath": "/pages/mine/mine",  
  26.           "text": "我的",  
  27.           "iconPath": "../../img/tabBar_mine.png",  
  28.           "selectedIconPath": "../../img/tabBar_mine_cur.png",  
  29.           "selectedColor": "#4EDF80",  
  30.           active: true  
  31.         }  
  32.       ],  
  33.       "position": "bottom"  
  34.     }  
复制代码
mine.wxml引入模板：
  1. <import src="../../template/tabBar.wxml" />  
  2. <template is="tabBar" data="{{tabBar: tabBar}}" />  
复制代码
最后演示如下：
1.gif 
方案二

我把配置数据统一放在app.js文件，通过点击跳转页面后在把数据添加到当前页面实例上，具体做法如下：

    1、app.js文件配置：
  1. //app.js  
  2. var net = require('common/net');  
  3. var a_l, a_d = {}, a_cbSucc, a_cbSuccFail, a_cbFail, a_cbCom, a_h, a_m;  
  4. App({  
  5.   onLaunch: function () {  
  6.     var that = this;  
  7.   },  
  8.   //修改tabBar的active值  
  9.   editTabBar: function () {  
  10.     var _curPageArr = getCurrentPages();  
  11.     var _curPage = _curPageArr[_curPageArr.length - 1];<span style="font-family: Arial, Helvetica, sans-serif;">//相当于Page({})里面的this对象</span>  
  12.     var _pagePath=_curPage.__route__;  
  13.     if(_pagePath.indexOf('/') != 0){  
  14.       _pagePath='/'+_pagePath;  
  15.     }  
  16.     var tabBar=this.globalData.tabBar;  
  17.     for(var i=0; i<tabBar.list.length; i++){  
  18.       tabBar.list.active=false;  
  19.       if(tabBar.list.pagePath==_pagePath){  
  20.         tabBar.list.active=true;//根据页面地址设置当前页面状态  
  21.       }  
  22.     }  
  23.     _curPage.setData({  
  24.       tabBar: tabBar  
  25.     });  
  26.   },  
  27.   globalData: {  
  28.     userInfo: null,  
  29.     //配置tabBar  
  30.     tabBar: {  
  31.       "color": "#9E9E9E",  
  32.       "selectedColor": "#f00",  
  33.       "backgroundColor": "#fff",  
  34.       "borderStyle": "#ccc",  
  35.       "list": [  
  36.         {  
  37.           "pagePath": "/pages/index/index",  
  38.           "text": "主页",  
  39.           "iconPath": "/pages/templateImg/tabBar_home.png",  
  40.           "selectedIconPath": "/pages/templateImg/tabBar_home_cur.png",  
  41.           "selectedColor": "#4EDF80",  
  42.           active: false  
  43.         },  
  44.         {  
  45.           "pagePath": "/pages/village/city/city",  
  46.           "text": "目的地",  
  47.           "iconPath": "/pages/templateImg/tabBar_village.png",  
  48.           "selectedIconPath": "/pages/templateImg/tabBar_village_cur.png",  
  49.           "selectedColor": "#4EDF80",  
  50.           active: false  
  51.         },  
  52.         {  
  53.           "pagePath": "/pages/mine/mine",  
  54.           "text": "我的",  
  55.           "iconPath": "/pages/templateImg/tabBar_mine.png",  
  56.           "selectedIconPath": "/pages/templateImg/tabBar_mine_cur.png",  
  57.           "selectedColor": "#4EDF80",  
  58.           active: false  
  59.         }  
  60.       ],  
  61.       "position": "bottom"  
  62.     }  
  63.   }  
  64. })  
复制代码
2、index.js+mine.js+city.js页面使用：
  1. var App=getApp();  
  2. Page({  
  3.   data:{  
  4.     detail: {},  
  5.   },  
  6.   onLoad:function(options){  
  7.     App.editTabBar();//添加tabBar数据  
  8.     var that=this;  
  9.   }  
  10. })  
复制代码
最终演示和上图一致！


二：map组件markers属性动态初始化

今天在写小程序详情页时候遇到一个问题，map组件的markers属性是通过异步请求到数据后设置的，结果就导致了微信底层渲染出错。但是如果我先在data初始化markers变量，每次小程序都不能正常渲染都是初始化的北京的数据。然后写了如下测试：

test.js：
  1. Page({  
  2.   data:{  
  3.     map:{  
  4.       lat: 0,  
  5.       lng: 0,  
  6.       markers: [],  
  7.       hasMarkers: false//解决方案  
  8.     }  
  9.   },  
  10.   onLoad: function(options){  
  11.     var that=this;  
  12.     wx.getLocation({  
  13.       type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  
  14.       success: function (res) {  
  15.         // success  
  16.         wx.request({  
  17.           url: 'https://xxx.com/detail.htm?vid=3&latlng=' + res.latitude + ',' + res.longitude,  
  18.           data: {},  
  19.           method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
  20.           // header: {}, // 设置请求的 header  
  21.           success: function (res) {  
  22.             // success  
  23.             that.setData({  
  24.               'map.lat': res.data.data.lat,  
  25.               'map.lng': res.data.data.lng,  
  26.               'map.markers': [{  
  27.                 latitude: res.data.data.lat,  
  28.                 longitude: res.data.data.lng,  
  29.                 name: res.data.data.title,  
  30.                 desc: res.data.data.address  
  31.               }],  
  32.               'map.hasMarkers': true//解决方案  
  33.             });  
  34.             console.log(that.data.map.markers);  
  35.           }  
  36.         })  
  37.       }  
  38.     })  
  39.   }  
  40. });  
复制代码
test.wxml：
  1. <view style="height: 100rpx;">  
  2. {{map.lat}}--{{map.lng}}--{{map.markers[0].name}}--{{map.markers[0].desc}}  
  3. </view>  
  4. <map latitude="{{map.lat}}" longitude="{{map.lng}}" markers="{{map.markers}}"></map>  
复制代码
测试一：data里面没有初始化map变量
2.jpg
测试二：初始化map变量，并在wxml把map数据都打印出来
3.jpg 
为什么会这样呢？？各种测试，最后发现只要不是经过远程请求在来设置map值就不会出问题。

后来经大神网友提点，由于异步设置值的过程，组件已经渲染。但是map变量没有预定义是undefined状态，map初始化拿不到数据直接报错了，而异步过来又变成动态更新导致了wxml需要重新渲染map组件的情况导致的。因为官方文档有提到：

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。 标记点markers只能在初始化的时候设置，不支持动态更新。

只能初始化一次，因此导致每次都是显示的初始化信息。

然后，网友给出的解决方案完美解决了这个问题：

wx:if会渲染一下组件，那我们按照这个思路给他加个if就行了
  1. <map markers="{{markers}}" style="width: 375px; height: 200px;" wx:if="{{map}}"></map>
复制代码

默认map是false,就是加载时不渲染map组件，等ajax回来后把map设置为true，这样就动态渲染成你要的地址了

原文转自解放号社区：http://bbs.jointforce.com/topic/25439

这篇关于微信小程序编写tabBar模板，map组件markers属性动态初始化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/544492。

相关文章

如何用Python绘制简易动态圣诞树

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码：效果：总结 代码：import randomimport timefrom math
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
Java中JSON字符串反序列化(动态泛型)

Java中JSON字符串反序列化(动态泛型)

《Java中JSON字符串反序列化(动态泛型)》文章讨论了在定时任务中使用反射调用目标对象时处理动态参数的问题,通过将方法参数存储为JSON字符串并进行反序列化,可以实现动态调用,然而,这种方式容易导... 需求：定时任务扫描，反射调用目标对象，但是，方法的传参不是固定的。方案一：将方法参数存成jsON字
阅读更多...
使用Java编写一个文件批量重命名工具

使用Java编写一个文件批量重命名工具

《使用Java编写一个文件批量重命名工具》这篇文章主要为大家详细介绍了如何使用Java编写一个文件批量重命名工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景处理1. 文件夹检查与遍历2. 批量重命名3. 输出配置代码片段完整代码背景在开发移动应用时，UI设计通常会提供不
阅读更多...
.NET利用C#字节流动态操作Excel文件

.NET利用C#字节流动态操作Excel文件

《.NET利用C#字节流动态操作Excel文件》在.NET开发中,通过字节流动态操作Excel文件提供了一种高效且灵活的方式处理数据,本文将演示如何在.NET平台使用C#通过字节流创建,读取,编辑及保... 目录用C#创建并保存Excel工作簿为字节流用C#通过字节流直接读取Excel文件数据用C#通过字节
阅读更多...
JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
poj3468(线段树成段更新模板题)

poj3468(线段树成段更新模板题)

题意：包括两个操作：1、将[a.b]上的数字加上v；2、查询区间[a,b]上的和 下面的介绍是下解题思路： 首先介绍  lazy－tag思想：用一个变量记录每一个线段树节点的变化值，当这部分线段的一致性被破坏我们就将这个变化值传递给子区间，大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作，那么就从根节点[1,n]开始调用update函数进行操作，如果刚好执行到一个子节点，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2