<>强效果图:
实现效果图红色线包含部分的九宫格效果,并附项目带点击时间。
<>强,具体实现:
, 1,首先添加图片资源文件
,,在项目根目录新建一个目录,取名为图像,用于存放图片资源,然后添加进入几张图片
, 
2,在家里目录下的家。js文件中(参照前两篇小程序实践文章)进行数据源的配置
,,,,,数据源为一个数组,每个数组元素为一个对象,该对象包含名称(项目文字),img(示项意图),url(点击该项目跳转目录)
, 3,依据列表渲染的知识点进行home.wxml的编程
,,①,从效果图上每个项都被细线包围,这是构建思路是,外部一个视图中,绘制顶部边框线
,,,,,,最外视图层样式:
,,,,,,
,,,,,②、外部视图里面每一个项绘制右侧和下侧的边框线,,每个条目的宽度设为33.33333%意味着一行显示均分显示3个项目。
,,, 
home.wxml文件
& lt;视图类=癶ome_grids”比;
& lt;块wx:=" {{griddata}}”天气:关键=癷tem.name”比;
& lt;导航器url=" . ./{{item.url}}/{{项目。url}}”类=癶ome_grid”比;
& lt;图像src=" https://www.yisu.com/zixun/{{item.img}}”类=癶ome_icon祝辞& lt;/image>
& lt;视图类=" home_grid_text "在{{item.name}} & lt;/view>
& lt;/navigator>
& lt;/block>
& lt;/view>
home.wxss文件
以上所述是小编给大家介绍的微信小程序项目实践之九宫格实现及项目跳转功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持! 微信小程序项目实践之九宫格实现及项目跳转功能
