小程序开发实战:实现九宫格界面的导航的代码实现


Posted in Javascript onJanuary 19, 2017

小程序是长在微信上的,是移动端的界面,为了能够更方便的使用,我们常常希望使用九宫格界面的方式作为导航,那要如何实现呢?

基于一个简单的思考,九宫格就是三行三列,如果把行作为一个单位,再将每一行分成三列,那是不是就可以了?我们实践一下。

首先来考虑九宫格数据的生成,每一个格子需要有一个图标、一个标题、一个便于跳转的路由,那天现在我们有九个页面,所以定义一个一维数组即可。为了更好的进行后续的配置,我们将这个数组独立到一个文件中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.

<template name="cell"> 
 <navigator url="{{route}}" class="pages-item" style="height:{{cellHeight}}"> 
  <view class="{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}" > 
   <image src="{{icon}}" class="pages-icon"></image> 
  </view> 
  <view class="pages-text-wrapper"> 
   <text class="pages-text">{{text}}</text> 
  </view> 
 </navigator> 
</template>

这里看到两个大括号内套的是从外面传入的数据,然后在里面可以进行简单的逻辑判断,以便于更好的呈现。比如text==null的时候,我们希望呈现的是一个空背景的格子,在有数据的时候我们希望呈现一个含背景的格子,所以

"{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".

另外一点,由于我们是将该界面文件作为模板的,所以必须要用template标记来包住,同时命一个名字name,这样在引用模板的地方才可以识别调用。 现在我们在index.wxml中引用这个模板

<!--index.wxml--> 
<import src="cell.wxml" /> 
<view class="pages-container"> 
 <scroll-view scroll-y="true" class="pages-wrapper"> 
  <view wx:for="{{pageItems}}" wx:key="{{text}}"> 
   <view class="pages-row"> 
    <template is="cell" data="{{...item[0],cellHeight}}" /> 
    <template is="cell" data="{{...item[1],cellHeight}}" /> 
    <template is="cell" data="{{...item[2],cellHeight}}" /> 
   </view> 
  </view> 
 </scroll-view> 
</view>

模板的引用使用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: #ddd 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元素来呈现格子,所以每个格子自然就可以导航了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
vue按需加载实例详解
Sep 06 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
BootStrap组件之进度条的基本用法
Jan 19 #Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 #Javascript
js实现符合国情的日期插件详解
Jan 19 #Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 #Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 #Javascript
原生js实现电商侧边导航效果
Jan 19 #Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 #Javascript
You might like
Session的工作方式
2006/10/09 PHP
php解析url的三个示例
2014/01/20 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
php表单处理操作
2017/11/16 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
javascript 写类方式之二
2009/07/05 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
JS实现星星海特效
2019/12/24 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
2015年银行客户经理工作总结
2015/04/01 职场文书
同意报考证明
2015/06/17 职场文书
详解Python牛顿插值法
2021/05/11 Python
详解Python中__new__方法的作用
2022/03/31 Python