设计产品内容页面的时候可以暂把应用的首页换成这个产品内容页面 .. 打开 app.js .. 把这个产品内容页面放在所有页面的最上面 ... 这样它会成为应用的首页 ..

内容页加载数据的时候可以显示一个内容加载的占位符 .. 在产品内容页面上先导入 Placeholder 组件 .. 位置是上一级目录的上一级目录下面的 components .. placeholder ..

然后在页面的 state 里面 .. 添加一个 placeholder .. 默认让它等于 true ..

在页面的视图里面 .. 使用一个 Placeholder 组件 .. 组件上面加上 m-3 这个 css 类 .. show 可以设置成 placeholder 这个 state 的值 .. 上面把这个 placeholder 从 state 里面解构出来 ..

现在产品内容页面上会显示一个内容占位符 .. 这个占位符可以单独为产品页面重新设计一下 .. 让这个 Placeholder 支持一个 type 属性 .. 让它等于 product ..

下面再打开这个占位符组件 .. 按住 alt 键 .. 点一下这个组件 ..

在这个组件的默认属性里面，添加一个 type .. 默认它是一个空白 ..

然后在组件的视图里面 .. 先从组件的属性里面把 type 解构出来 ..

视图需要重新设计一下 .. 先添加一个 View .. 用它包装一下现在的占位符 .. 然后把这个 key 属性放在这个 view 包装的上面 ..

下面再做一下判断 .. 根据 type 的值决定是不是需要再显示一些占位符元素 ..

检查 type 的值是不是等于 product .. 如果是的话，就在视图里再添加点东西 ..

一个 View .. 里面再包装一个 View .. 设置一下它的 className 的值 .. 这个值可以是组件里定义的 classValue 的值 .. 后面再加上一个 mb-5 ..

里面添加两个占位符的行元素 .. 在 View 上面加上 line 这个类 .. 然后再设置一下这些行的长度 .. 第一行的上面加上一个 full ， 第二行的上面再额外加上一个 long ..

复制一份 .. 在这个 placeholder 里面，再添加两个行元素 .. 修改一下这些行的长度 .. 第一行是 very short line .. 第二行是 full line .. 第三行也是 full line .. 第四行设置成 medium line ..

保存一下文件 .. 再到模拟器上预览一下这个产品页的内容加载占位符 ..