小程序之页面用九宫格及item跳转的功能实现

网友投稿 836 2022-10-05

小程序之页面用九宫格及item跳转的功能实现

小程序之页面用九宫格及item跳转的功能实现

这篇文章主要介绍了关于小程序之页面用九宫格及item跳转的功能实现,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

效果图:

程序员必备接口测试调试工具:立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试,同时在线协作,内容实时同步

具体实现:

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

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

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

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

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

最外层view样式:

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

这里使用navigation组件

完整代码:

home.wxml文件 {{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;  }-

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:awk入门教程及应用场景
下一篇:面试官:vim中如何跳到文件的开头,第n行,最后一行?
相关文章

 发表评论

暂时没有评论,来抢沙发吧~