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

效果图:

实现效果图红色线包含部分的九宫格效果,并附带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;
  }

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

silverlight: "[HtmlPage_NotEnabled] 调试资料字符串不可用"的解决

相信有不少人遇到过这个恶心的问题,xaml与cs编译正常,也能在浏览器里运行,但是就是无法在vs.net或blend里以【设计视图】方式打开,只能对着代码视图盲...

1837
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

这是一个Flash插件,swf是一种动画格式,实现效果应该是下面的Object内容

572
来自专栏优启梦

EMLOG优化 | 链接统一 URL标准化

打开主题的header.php,在<head></head>标签内,插入如下代码:

910
来自专栏c#开发者

HTML5手机APP开发入(4)

HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/s...

3409
来自专栏c#开发者

XCode4.2.1 使用NavigationController实现View切换

XCode4.2.1 使用NavigationController实现View切换 现在网上有很多关于NavigationController实现页面之间导航...

3318
来自专栏技术墨客

构建用于生产的React静态化单页面服务 原

React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

1493
来自专栏前端人人

React多页面应用3(webpack4 多页面实现)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

3405
来自专栏前端人人

React项目配置4(如何在开发时跨域获取api请求)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React项目配置1(如何管理项目公共js方法)---...

3605
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(十九):课程详情页配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

382
来自专栏前端人人

React多页面应用6(webpack4 开发环境打包性能初提升)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,...

37811

扫码关注云+社区