目录
项目初始化 / 基础配置
项目创建
配置路由/页面/tabbar
pages.json配置tabbar
配置图标/静态资源
导航栏和字体颜色
scroll-view实现横向滚动条样式
公共模块定义components组件
新建组件
使用组件
组件里的结构
布局个人中心页面
组件差异化处理
数据传递
导航吸顶效果
点击高亮
页面跳转与详情页
点击事件
详情页
项目初始化 / 基础配置
项目创建
这就是创建好的默认的页面
配置路由/页面/tabbar
pages.json配置tabbar
此时的页面
配置图标/静态资源
导航栏和字体颜色
scroll-view实现横向滚动条样式
写一下大致的结构,也就是写一个假数据,先把结构写出来吗,再放进去真是的数据
还可以这样写
然后写写样式就行
公共模块定义components组件
这明显是一个东西,可以做成一个组件,在2个页面里进行复用
新建组件
使用组件
这时自己写写样式
组件里的结构
目前的样子
布局个人中心页面
组件差异化处理
组件页面:
两个一样的盒子,根据条件判断
数据传递
首页页面:目前是假数据
导航吸顶效果
这里要注意:不同平台存在一定的差异
CSS 支持 | uni-app官网
点击高亮
具体这样写
页面跳转与详情页
点击事件
详情页
详情页就不是组件了,需要新建页面了
本内容于学习B站课程所记录,具体源码见源码