摘要:将数据呈现到界面之后,我们需要相当的样式来配合,代码如下。效果如下图我们模板中使用元素来呈现格子,所以每个格子自然就可以导航了。
作者:如意
来自:授权地址
转自:微信小程序联盟
小程序是长在微信上的,是移动端的界面,为了能够更方便的使用,我们常常希望使用九宫格界面的方式作为导航,那要如何实现呢?
基于一个简单的思考,九宫格就是三行三列,如果把行作为一个单位,再将每一行分成三列,那是不是就可以了?我们实践一下。
首先来考虑九宫格数据的生成,每一个格子需要有一个图标、一个标题、一个便于跳转的路由,那天现在我们有九个页面,所以定义一个一维数组即可。为了更好的进行后续的配置,我们将这个数组独立到一个文件中routes.js,然后将其在index.js页面中引用,routes放到index的目录下。
var PageItems = [ { text: "格子1", icon: "../../images/c1.png", route: "../c1/c1", }, { text: "格子2", icon: "../../images/c2.png", route: "../c2/c2", }, { text: "格子3", icon: "../../images/c3.png", route: "../c3/c3", }, { text: "格子4", icon: "../../images/c4.png", route: "../c4/c4", }, { text: "格子5", icon: "../../images/c5", route: "../c5/c5", }, { text: "格子6", icon: "../../images/c6.png", route: "../c6/c6", }, { text: "格子7", icon: "../../images/c7.png", route: "../c7/c7", }, { text: "格子8", icon: "../../images/c8", route: "../c8/c8", }, { text: "格子9", icon: "../../images/c9.png", route: "../c9/c9", } ]; module.exports = { PageItems: PageItems }
在index.js页面中我们引用routes.js,然后得到数据PageItems,但PageItems是一维数组,而我们前面思考是要用一行三列为一个组的,所以需要将这一维数组进行重新组合,最直接的方法就是生成一个数组,每个数组的元素又包含了一个只有三个元素的一维数组,代码如下
//index.js //获取应用实例 var app = getApp() var routes = require("routes"); Page({ data: { userInfo: {}, cellHeight: "120px", pageItems: [] }, //事件处理函数 onLoad: function () { var that = this console.log(app); //调用应用实例的方法获取全局数据 app.getUserInfo(function (userInfo) { wx.setNavigationBarTitle({ title: "全新测试追踪系统-" + userInfo.nickName, success: function (res) { // success } }) that.setData({ userInfo: userInfo }) var pageItems = []; var row = []; var len = routes.PageItems.length;//重组PageItems len = Math.floor((len + 2) / 3) * 3; for (var i = 0; i < len; i++) { if ((i + 1) % 3 == 0) { row.push(indexs.PageItems[i]); pageItems.push(row); row = []; continue; } else { row.push(indexs.PageItems[i]); } } wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; that.setData({ cellHeight: (windowWidth / 3) + "px" }) }, complete: function () { that.setData({ pageItems: pageItems }) } }) }) } })
在index.wxml中,我们来布局界面,由于每一个格子都是一样的,只是数据不一样,所以想到用模板来呈现。为此,我们先做一个单元格的模板面cell.wxml.
{{text}}
这里看到两个大括号内套的是从外面传入的数据,然后在里面可以进行简单的逻辑判断,以便于更好的呈现。比如text==null的时候,我们希望呈现的是一个空背景的格子,在有数据的时候我们希望呈现一个含背景的格子,所以
"{{text==null||text.length==0?"pages-icon-wrapper-no-bg":"pages-icon-wrapper"}}".
另外一点,由于我们是将该界面文件作为模板的,所以必须要用template标记来包住,同时命一个名字name,这样在引用模板的地方才可以识别调用。
现在我们在index.wxml中引用这个模板
模板的引用使用import来引用,在调用的地方使用template和is,其中is指定的是cell.wxml中的name。item[0]、item[1]、item[2]是循环传入的数据,cellHeight是在index.js的data中存放的数据。在将数据传入到模板内部时,框架会将其展开在字段的形式,即key-value对,所以再看cell.wxml文件,就会发现内部是直接使用key来作为数据的。
将数据呈现到界面之后,我们需要相当的样式来配合,index.wxss代码如下。
/**index.wxss**/ .pages-container { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; padding-top: 10rpx; padding-bottom: 10rpx; } .pages-title-bg { width: 100%; } .pages-wrapper { } .pages-row { width: 100%; display: flex; flex-direction: row; justify-content: space-around; } .pages-item { position: relative; padding: 10rpx; width: 33%; background-color: #fff; border: #ffffd solid 1px; } .pages-icon-wrapper { display: flex; justify-content: space-around; align-items: center; margin: 10rpx; border-radius: 30%; height: 75%; background:#00CD0D; } .pages-icon-wrapper-no-bg { display: flex; justify-content: space-around; align-items: center; margin: 10rpx; height: 75%; } .pages-icon { width: 100rpx; height: 100rpx; } .pages-text-wrapper { text-align: center; } .pages-text { font-weight: bolder; }
效果如下图
我们模板中使用navigator元素来呈现格子,所以每个格子自然就可以导航了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/66528.html
摘要:将数据呈现到界面之后,我们需要相当的样式来配合,代码如下。效果如下图我们模板中使用元素来呈现格子,所以每个格子自然就可以导航了。 作者:如意来自:授权地址转自:微信小程序联盟 小程序是长在微信上的,是移动端的界面,为了能够更方便的使用,我们常常希望使用九宫格界面的方式作为导航,那要如何实现呢? 基于一个简单的思考,九宫格就是三行三列,如果把行作为一个单位,再将每一行分成三列,那是不...
摘要:首发地址微信小程序的布局种必备常用的布局模式代码库地址官方建议的布局的布局相比传统的布局来说,简单快捷方便。 首发地址:http://weappdev.com/t/flex-wx... wxflex 微信小程序的Flex布局demo-4种必备常用的Flex布局模式 代码库 github地址:https://github.com/icindy/wxflex 官方建议的Flex布局 Fle...
摘要:中简单搞定接口访问,以及简析掘金最近总结的一些经验,对于或中使用接口的一些心得。这里,本文将数据结构之学习总结掘金前言前面介绍了的数据结构,今天抽空学习总结一下另一种数据结构。浅析事件传递掘金中的事件传递主要涉及三个方法和。 Android 系统中,那些能大幅提高工作效率的 API 汇总(持续更新中...) - 掘金前言 条条大路通罗马。工作中,实现某个需求的方式往往不是唯一的,这些不...
阅读 1128·2021-11-22 15:24
阅读 4311·2021-09-23 11:51
阅读 2238·2021-09-08 09:36
阅读 3468·2019-08-30 15:43
阅读 1262·2019-08-30 13:01
阅读 1081·2019-08-30 12:48
阅读 492·2019-08-29 12:52
阅读 3286·2019-08-29 12:41