微信小程序项目实践之九宫格实现及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 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
javascript实用方法总结
Feb 06 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
微信小程序录音与播放录音功能
Dec 25 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
angular 服务随记小结
May 06 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
原生JS中应该禁止出现的写法
May 05 Javascript
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 生成唯一id的几种解决方法
2013/03/08 PHP
万能的php分页类
2017/07/06 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
会计应聘求职信范文
2013/12/17 职场文书
设计专业自荐信
2014/06/19 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
2016年国培研修日志
2015/11/13 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Vue+Flask实现图片传输功能
2022/04/01 Vue.js