前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发-Tab页切换及Grid布局

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

作者头像
code2roc
发布2023-07-19 14:30:34
6400
发布2023-07-19 14:30:34
举报

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

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

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

代码语言:javascript
复制
 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中进行配置即可。

代码语言:javascript
复制
"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/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-12-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档