微信小程序 九宫格实例代码


Posted in Javascript onJanuary 21, 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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 #Javascript
巧用canvas
Jan 21 #Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 #Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 #Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 #Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 #Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python调用windows api锁定计算机示例
2014/04/17 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python实现图片文件批量重命名
2020/03/23 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Python如何获取文件指定行的内容
2020/05/27 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
银行优秀员工事迹
2014/02/06 职场文书
挂靠协议书范本
2014/04/22 职场文书
孝女彩金观后感
2015/06/10 职场文书
餐厅开业活动方案
2019/07/08 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python