文章目录
- 项目步骤
- 第一部分 导航栏设计
- 第一步：
- 第三步：
- 第四步
- 第五步：
- 第二部分：
- 第1步：轮播图
- 第2步 ：宫格导航
- 第3步：香哈头条初始化数据
- 第4步：香哈头条列表渲染及绑定数据
- 效果
- 讲解
- 1 swiper轮播图
- 2 WXML 模板
- 3 WXML引用
- import引用
- include引用
- 4 WXML 列表渲染
- wx:for列表渲染单个组件
- block wx:for列表渲染多个组件
- wx:key指定唯一标识符
- 布局讲解
项目步骤
第一部分 导航栏设计
第一步：
新建一个xhcp项目
第二步：
打开App.json配置文件，在pages数组里添加5个页面路径:“pages/cook/cook”“pages/
headline/headline”“pages/food/food”“pages/message/message”pages/me/me”，保存后会自动生成
相应的页面文件夹;删除“pages/index/index”“pages/logs/logs”页面路径以及对应的文件夹。
app.json
{"pages":["pages/cook/cook","pages/headline/headline","pages/food/food","pages/message/message","pages/me/me"]
}
