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


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 相关文章推荐
jquery last-child 列表最后一项的样式
Jan 22 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
js实现录音上传功能
Nov 22 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
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
CSS常用网站布局实例
2008/04/03 Javascript
javascript document.images实例
2008/05/27 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
《维生素c的故事》教学反思
2014/02/18 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
年会搞笑主持词
2014/03/27 职场文书
书香校园建设方案
2014/05/02 职场文书
欢迎新生标语2015
2015/07/16 职场文书
暑假生活随笔
2015/08/15 职场文书
2019公司管理制度
2019/04/19 职场文书
php引用传递
2021/04/01 PHP
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Python实现的扫码工具居然这么好用!
2021/06/07 Python