效果图:

实现效果图红色线包含部分的九宫格效果,并附带item点击时间。

------------------------------------------------------------------------------------------------------

 具体实现:

 1、首先添加图片资源文件

    在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片

 2、在home目录下的home.js 文件中(参照前两篇小程序实践文章) 进行数据源的配置

数据源为一个数组,每个数组元素为一个对象,该对象包含name(item文字),img(item示意图),url(点击该item跳转目录)

 3、依据列表渲染的知识点进行home.wxml的编程

    ①、从效果图上每个item都被细线包围,这是构建思路是,外部一个view,绘制顶部边框线

最外层view样式:

②、外部view里面每一个item绘制右侧和下侧的边框线,  每个item的宽度设为33.33333% 意味着一行显示均分显示3个item。

③、每个item内部包含一个图片和一个文字,且item可以点击跳转到各自指定的页面

这里使用navigation组件

  navigation组件有一个属性url:当前小程序内的跳转链接 ,指定点击该组件跳转的页面路径

完整代码:

   home.wxml文件
<view class="home_grids">
<block wx:for="{{griddata}}" wx:key="item.name">
<navigator url="../{{item.url}}/{{item.url}}" class='home_grid'>
<image src="{{item.img}}" class="home_icon"></image>
<view class="home_grid_text">{{item.name}}</view>
</navigator>
</block>
</view>
  home.wxss文件

  .home_grids {
   border-top: 1rpx solid #D9D9D9;
   overflow: hidden;
   margin-top: 10px
  }   .home_grid{
   position: relative;
   float: left;
   padding: 20px 10px;
   width: 33.33333333%;
   box-sizing: border-box;
   border-right: 1rpx solid #D9D9D9;
   border-bottom: 1rpx solid #D9D9D9;
  }

--------------------------------------------------------------------------------------

小程序实践(一):主页tab选项实现

小程序实践(二):swiper组件实现轮播图效果

小程序实践(三):九宫格实现及item跳转

小程序实践(四):动态控制组件的显示/隐藏

小程序实践(五):for循环绑定item的点击事件

小程序实践(六):view内部组件排版

小程序实践(七):页面间传值

小程序实践(八):验证码倒计时功能

小程序实践(九):返回到上一个界面并传值回去

小程序实践(十):textarea实现简单的编辑文本界面

小程序实践(十一):showModal的使用

小程序实践(十二):七牛云上传图片

小程序实践(三):九宫格实现及item跳转的更多相关文章

  1. 小程序实践(五):for循环绑定item的点击事件

    微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...

  2. 小程序实践(十一):showModal的使用

    显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...

  3. 小程序实践(十):textarea实现简单的编辑文本界面

    textarea是官方的原生组件,用于多行输入 简单的例子,监听文本内容.长度,以及设置最大可输入文本长度 wxml <view class='textarea-Style'> <t ...

  4. 小程序实践(六):view内部组件排版

    涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的 ...

  5. 小程序实践(二):swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  6. 小程序实践(一):主页tab选项实现

    官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: ----------------------------------------------------- ...

  7. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  8. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  9. 微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)

    今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...

随机推荐

  1. io模块及其API

    模块: io io.StringIO io.BytesIO 所包含API列表: io.StringIO.write: 写入字符 io.StringIO.getvalue: 获取写入的字符 io.Str ...

  2. vue计算属性(通过计算得来的属性)

    1.computed:是一个计算属性,用来监听属性的变化 eg: <p>computed:{{count}}</p> computed:{     count(){     c ...

  3. eos开发(二)使用cleos命令行客户端操作EOS(钱包wallet基础操作)

    不知道下边这一段英文你们是不是能看懂,如果看不懂那就算了,我就是转过来随便看看的. 总之你记住nodeos.cleos和keosd这三个工程十分重要就行了,回头咱们的研究都从这三个工程杀进去. EOS ...

  4. java模式—装饰者模式

    装饰者模式 1.意图: 动态地给一个对象添加一些额外的职责.就增加功能来说, Decorator模式相比生成子类更为灵活.该模式以对客 户端透明的方式扩展对象的功能. 2.适用环境 (1)在不影响其他 ...

  5. mysql 开发进阶篇系列 3 SQL 优化(索引使用方法)

    一. 本章介绍mysql中的索引的分类,存储,使用方法的介绍 1.  索引的存储分类 MyISAM存储引擎的表的数据和索引是自动分开存储的,各自是独立的一个文件, innodb 存储引擎的表的数据和索 ...

  6. 可以落地的DDD到底长什么样?

    领域驱动设计的概念 ​ 大家都知道软件开发不是一蹴而就的事情,我们不可能在不了解产品(或行业领域)的前提下进行软件开发,在开发前通常需要进行大量的业务知识梳理,然后才能到软件设计的层面,最后才是开发. ...

  7. PEB标记反调试方法

    PEB标记反调试方法 一丶PEB结构简介 PEB.简称进程环境快. 我们在讲DLL隐藏的时候已经说过了. 具体博客链接: https://www.cnblogs.com/iBinary/p/96018 ...

  8. 精读JavaScript模式(八),JS类式继承

    一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...

  9. backbond Model实现

    backbond中的M,指的是模型,即存放数据以及数据相关逻辑的单位.在分析其结构之前,先看一下其调用过程. <script> (function ($) { World = Backbo ...

  10. zepto 事件分析4(事件队列)

    前面分析了zepto的事件绑定,接下来分析事件解绑,先看一下zepto中解绑的off方法: $.fn.off = function(event, selector, callback){ var $t ...