介绍 home.wxml文件
,& lt; view 类=癶ome_grids"比;
& lt;才能block 天气:为=皗{griddata}},,天气:关键=癷tem.name"比;
,,& lt; navigator url=? ./{{item.url}}/{{item.url}}“,类=& # 39;home_grid& # 39;比;
,,,& lt; image src=https://www.yisu.com/zixun/{{item.img}}”class=" home_icon ">
<视图类=" home_grid_text "> {{item.name}}
块
.home_grids {
,border-top: 1 rpx solid # D9D9D9;
,溢出:隐藏;
,margin-top: 10 px
}
.home_grid {
,位置:相对;
,,浮动:左;
,,填充:20 px 10 px;
,,宽度:33.33333333%;
,box-sizing: border-box;
,边境:1 rpx solid # D9D9D9;
,边界底部:1 rpx solid # D9D9D9;
}
这篇文章主要介绍微信小程序实现九宫格跳转的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>微信小程序怎么实现九宫格跳转吗?
效果图:
实现效果图红色线包含部分的九宫格效果,并附带项点击时间。
具体实现:
1,首先添加图片资源文件
,在项目根目录新建一个目录,取名为图像,用于存放图片资源,然后添加进入几张图片
2,在家里目录下的家。js文件中进行数据源的配置
数据源为一个数组,每个数组元素为一个对象,该对象包含名称(项目文字),img(示项意图),url(点击该项目跳转目录)
3,依据列表渲染的知识点进行回家。wxml的编程
,①,从效果图上每个项都被细线包围,这是构建思路是,外部一个视图中,绘制顶部边框线
最外视图层样式:
②,外部视图里面每一个项绘制右侧和下侧的边框线,,每个条目的宽度设为33.33333%意味着一行显示均分显示3个项目。
③,每个项目内部包含一个图片和一个文字,且项目可以点击跳转到各自指定的页面
这里使用导航组件
导航组件有一个属性url:当前小程序内的跳转链接,指定点击该组件跳转的页面路径
完整代码:
回家。wxs文件
以上是“微信小程序实现九宫格跳转的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
