微信小程序的 tabbar设置 + 列表循环 + 条件渲染 + 事件绑定 + 微信小程序的常用标签

参考
微信小程序：

我的码云仓库地址：

列表循环：

1. 当循环的是普通数组时使用这种写法，*this表示的是循环项
   [1,2,3,21,4,66,3] , [‘22’,‘44’,‘7u7’]

wx:key="*this"  
<view wx:for="{
    {arr}}" wx:for-item="item" wx:for-index="index" wx:key="*this" >
	<view bindtap="EventTab" data-item="{
    {item}}"></view>
</view>

2. 当循环的是 Array / Object :
   如果只循环一次，小程序会默认将循环项和索引命名为item和index。所以 wx:for-item="item" wx:for-index="index"在这种情况下可以省略。不写也不会报错。

 wx:key="item"
<view wx:for="{
    {arr/Obj}}" wx:for-item="item" wx:for-index="index" wx:key="item">
	<view bindtap="EventTab" data-item="{
    {item}}"></view>
	循环和绑定事件并通过data-item传参
</view>



<view 
class="weui-flex__item" 
wx:for="{
    {navs}}" 
wx:key="item">
此处就省略了item和index的写入，小程序会默认将选中项和索引命名为item和index。
    <view class="placeholder" 
    	bindtap="tabChange" 
    	data-state="{
    {item.index}}"
    >
    	{
  {item.title}}
    </view>
</view>

3. 当循环对象时，最好把item和index名称都修改一下。
   wx:for-item=“value” wx:for-index=“item.id”

<view wx:for="{
    {对象}}" wx:for-item="value" wx:for-index="item.id"></view>

全局配置：

1,设置tabBar:

在app.json文件中，与pages同级，添加tabBar{}

"pages":[],
"window":{
   
    "navigationBarBackgroundColor": "#0094ff", 导航头背景
    "navigationB