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


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 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
Jquery解析json数据详解
Dec 26 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 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
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
JS 建立对象的方法
2007/04/21 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python子类继承父类构造函数详解
2019/02/19 Python
在python中修改.properties文件的操作
2020/04/08 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
经典c++面试题五
2014/12/17 面试题
高级销售员求职信
2013/10/25 职场文书
给老师的检讨书
2014/02/11 职场文书
少儿节目主持串词
2014/04/02 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers
python和anaconda的区别
2022/05/06 Python