微信小程序项目实践之九宫格实现及item跳转功能


Posted in Javascript onJuly 19, 2018

效果图:

微信小程序项目实践之九宫格实现及item跳转功能

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

 具体实现:

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

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

 微信小程序项目实践之九宫格实现及item跳转功能

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

微信小程序项目实践之九宫格实现及item跳转功能

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

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

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

       最外层view样式:

       微信小程序项目实践之九宫格实现及item跳转功能

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

   微信小程序项目实践之九宫格实现及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;

}

总结

以上所述是小编给大家介绍的微信小程序项目实践之九宫格实现及item跳转功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
详解Vue如何支持JSX语法
Nov 10 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
js调用设备摄像头的方法
Jul 19 #Javascript
微信小程序定位当前城市的方法
Jul 19 #Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 #Javascript
js中split()方法得到的数组长度问题
Jul 19 #Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 #Javascript
微信小程序表单弹窗实例
Jul 19 #Javascript
vue用递归组件写树形控件的实例代码
Jul 19 #Javascript
You might like
php调用新浪短链接API的方法
2014/11/08 PHP
JavaScript静态的动态
2006/09/18 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
python url 参数修改方法
2018/12/26 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python动态进度条的实现代码
2019/07/03 Python
softmax及python实现过程解析
2019/09/30 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
物流仓管员工作职责
2014/01/06 职场文书
党支部公开承诺书
2014/03/28 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
化验室岗位职责
2015/02/14 职场文书
工作犯错保证书
2015/05/11 职场文书