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


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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
easyui validatebox验证
Apr 29 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
JS 对象介绍
2010/01/20 Javascript
js 函数调用模式小结
2011/12/26 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
Vue分页器实现原理详解
2019/06/28 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python简易版停车管理系统
2019/08/12 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
如何用Python 加密文件
2020/09/10 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
师德师风建设方案
2014/05/08 职场文书
就职演讲稿范文
2014/05/19 职场文书
舞蹈专业求职信
2014/06/13 职场文书
2015大学迎新标语
2015/07/16 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
倡议书怎么写?
2019/04/11 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server