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

渲染：

实现效果图的红线包含部分九格效果，有项目点击时间。

具体实施：

1.首先，添加图片资源文件

在项目的根目录下创建一个名为images的新目录，用于存储图片资源，然后添加一些图片

2.在主目录的home.js文件中配置数据源(参考前面两篇小程序实践文章)

数据源是一个数组，每个数组元素都是一个对象，包含名称(项目文本)、img(项目图)和url(单击项目跳转到目录)

3.根据列表渲染的知识点，编程home.wxml

(1)、从效果图来看，每一项都被一条细线所包围。这就是建设思路。外部视图绘制顶部边框线

最外层视图样式：

外部视图中的每一项都绘制了右边框线和下边框线，每一项的宽度都设置为33.33333%，也就是说三项在一行中平均显示。

(3)每个项目包含一张图片和一个文本，项目可以点击跳转到其指定的页面

此处使用导航组件

导航组件有一个属性url:当前小程序中的跳转链接，它通过单击组件来指定要跳转的页面路径

完整代码：

文件home . wxml view class=' home _ grids ' block wx : for=' { { grid ATA } } ' wx : key=' item . name ' navigator URL='./{ { item . URL } }/{ { item . URL } } Class=' home _ grid ' image src=' http : { { item . img } } ' Class=' home _ icon '/imageview Class=' home _ grid _ text ' { item . name } }/view/navigator/block/view home . wxss文件。home _ grids { border-top : 1rpx solid # D9D 9；飞越：隐藏；页边距-top: 10px}。home_grid{ position:相对；向左浮动：padding: 20px 10px宽度： 33.333333333%；盒子尺寸：边框盒子；右边框： 1rpx实心# D9D 9；border-bottom: 1rpx实心# D9D 9；}摘要

以上是边肖介绍的微信小程序项目的九格实现和项目跳转功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！