微信小程序开发-Tab页切换及Grid布局

今天摸索了一下微信小程序的前端开发，作为入门教程，让你能够快速构建页面并且了解小程序，先看下今天完成的效果图。

首先，微信小程序页面构建肯定是少不了各种组件的使用，所以我们需要一个小程序的UI库，配合小程序原生控件来时用，达到快速构建页面的目的，我这里使用的是IView-Webapp,官网地址为：https://weapp.iviewui.com/docs/guide/start，有各种类型的组件，涉及到布局，表单，页面效果等，简单实用，并且是根据vue版迁移过来的，对vue比较熟练的朋友可以快速入门。

我们来分析一下这个页面，页面内容为Grid布局，可以使用IView-Webapp中的Grid 宫格组件，但官方示例是写死的标签布局，如果我们需要动态的从json数据中填充页面，我们就需要了解一下小程序相关的语法，先看下相关的代码。

 schooldata: [
      { name: "霸刀", imageurl: "../../resource/images/schoolicon/霸刀.png" },
      { name: "苍云", imageurl: "../../resource/images/schoolicon/苍云.png" },
      { name: "丐帮", imageurl: "../../resource/images/schoolicon/丐帮.png" },
      { name: "纯阳", imageurl: "../../resource/images/schoolicon/纯阳.png" },
      { name: "藏剑", imageurl: "../../resource/images/schoolicon/藏剑.png" },
      { name: "少林", imageurl: "../../resource/images/schoolicon/少林.png" },
      { name: "天策", imageurl: "../../resource/images/schoolicon/天策.png" },
      { name: "唐门", imageurl: "../../resource/images/schoolicon/唐门.png" },
      { name: "五毒", imageurl: "../../resource/images/schoolicon/五毒.png" },
      { name: "七秀", imageurl: "../../resource/images/schoolicon/七秀.png" },
      { name: "万花", imageurl: "../../resource/images/schoolicon/万花.png" },
      { name: "长歌", imageurl: "../../resource/images/schoolicon/长歌.png" },
      { name: "明教", imageurl: "../../resource/images/schoolicon/明教.png" },
    ]
<view id="main">
    <i-grid-item wx:for="{{schooldata}}" wx:for-item="school">
      <i-grid-icon>
        <image src="{{school.imageurl}}" />
      </i-grid-icon>
      <i-grid-label>{{school.name}}</i-grid-label>
    </i-grid-item>
  </view>

这里使用的for循环的相关语法，与vue也极其类似，只是由v-for变成了wx:for，其中for后面的数据为循环遍历的数组，要用双大括号包裹，for-item树形是指定的循环中每个数据的对象名称别名，不指定默认为item,在属性中与标签对中使用item对象的具体字段值时，需要使用双大括号包裹，达到引用的目的。

页面中还有一部分是Tab切换，我初始使用的是TabBar 面板，效果其实和我的界面效果图基本一致，但是切换只能是切换单页面中显示隐藏的内容，如果页面结构过于复杂，页面就会变得十分臃肿，经过查找资料，发现小程序是自带Tab切换的，只需要在app.json中进行配置即可。

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#409EFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "resource/images/index/home.png",
        "selectedIconPath":"resource/images/index/home_select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/index/search",
        "iconPath": "resource/images/index/search.png",
        "selectedIconPath": "resource/images/index/search_select.png",
        "text": "搜索"
      },
      {
        "pagePath": "pages/index/mine",
        "iconPath": "resource/images/index/mine.png",
        "selectedIconPath": "resource/images/index/mine_select.png",
        "text": "我的"
      }
    ]

加入tabBar数组，进行Tab配置，里面有几个属性需要说明下selectedColor是指切换Tab时文字的变化颜色，iconPath和selectedIconPath分别指未切换和切换选中时的图标，图标我这里使用的时阿里巴巴图标，可以指定大小和填充颜色，官网地址：http://www.iconfont.cn/

来源：CSDN

作者：Code_Roc

链接：https://blog.csdn.net/u013407099/article/details/84899842