小程序实践（三）：九宫格实现及item跳转

番茄西红柿发布于2019-04-23 13:34 / 658人阅读

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

效果图：

实现效果图红色线包含部分的九宫格效果，并附带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文件
   class="home_grids">
      for="{{griddata}}" wx:key="item.name">
        "../{{item.url}}/{{item.url}}" class=home_grid>
          "{{item.img}}" class="home_icon">
          class="home_grid_text">{{item.name}}

　　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的使用

小程序实践（十二）：七牛云上传图片

GPU云服务器云服务器九宫格九宫格图九宫格源码支付宝九宫格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2052.html

如意小程序开发实战：实现九宫格界面的导航

摘要：将数据呈现到界面之后，我们需要相当的样式来配合，代码如下。效果如下图我们模板中使用元素来呈现格子，所以每个格子自然就可以导航了。作者：如意来自：授权地址转自：微信小程序联盟小程序是长在微信上的，是移动端的界面，为了能够更方便的使用，我们常常希望使用九宫格界面的方式作为导航，那要如何实现呢？基于一个简单的思考，九宫格就是三行三列，如果把行作为一个单位，再将每一行分成三列，那是不...

mindwind 2019-08-20 13:50 评论0 收藏0
如意小程序开发实战：实现九宫格界面的导航

摘要：将数据呈现到界面之后，我们需要相当的样式来配合，代码如下。效果如下图我们模板中使用元素来呈现格子，所以每个格子自然就可以导航了。作者：如意来自：授权地址转自：微信小程序联盟小程序是长在微信上的，是移动端的界面，为了能够更方便的使用，我们常常希望使用九宫格界面的方式作为导航，那要如何实现呢？基于一个简单的思考，九宫格就是三行三列，如果把行作为一个单位，再将每一行分成三列，那是不...

xingqiba 2019-08-14 17:16 评论0 收藏0
小程序实践（二）：swiper组件实现轮播图效果

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

番茄西红柿 2019-04-23 13:34 评论0 收藏0
小程序实践（一）：主页tab选项实现

摘要：这里不再多具体介绍，只添加一个小需求，点击切换相关页面，该页面标题要和一致，页面内容也和一致，用于说明效果正确实现。官方文档效果图：实现底部Tab选项，只需要在项目根目录下的app.json下修改如图： --------------------------------------------------------------------------------------...

番茄西红柿 2019-04-23 13:34 评论0 收藏0