小程序实践(三):九宫格实现及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 条评论
登录 后参与评论

相关文章

来自专栏Hongten

pygame系列_mouse鼠标事件

E | hongtenzone@foxmail.com  B | http://www.cnblogs.com/hongten

2493
来自专栏每日一篇技术文章

weex-24-modal模块

如果你觉得这些界面颜色风格和你的应用配色格格不入,你可以自定义自己想要的类似的组件!

1371
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——系统更新以及配置字体

打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

4246
来自专栏柠檬先生

vue2.0 组件通信

组件通信:     子组件要想拿到父组件数据 props     子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件,     对...

22310
来自专栏挖坑填坑

Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

安装后还需要引用weui 样式以及我们的font-awesome图标苦,在我们项目index.html中引用

1392
来自专栏林德熙的博客

WPF 拖动滚动

使用 ListBox 可以简单做到,那么如何使用 ScrollViewer 做到相同效果?

1611
来自专栏DT乱“码”

解决chrome测试的时候页面上的表单一直会自动填充

做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉。 下面上下图: ...

2167
来自专栏知无涯

移动端前端开发调试-将safari设置iPhone模拟器

96111
来自专栏前端说吧

Vue - 实战疑点总结

2977
来自专栏DeveWork

移除WordPress 管理后台的主题编辑功能

出于安全考虑,如果你的WordPress 是多人使用的(比如说一个团队博客,多用户管理)。那么为防止一些小白胡乱修改后台导致网页问题,可以移除WordPress...

2046

扫码关注云+社区

领取腾讯云代金券