用户登录

我们可以把产品内容页面上的东西定义成一些组件 .. 先定义一个产品页面卡片组件 .. 放在 components 的下面,新建一个目录, product-page-card .. 里面有个 index.js 文件 ..

文件里面先添加一个基本的组件 .. 名字是 ProductPageCard ..

回到产品内容页面 .. 找到 card 这个类的元素 . 剪切一下这块儿视图 .. 替换成一个组件 .. 名字是 ProductPageCard .. 使用这个组件可以传递一个 data 属性 .. 它的值是 product .. 再给它一个 indicatorDots 属性 .. 它的值是 indicatorDots ..

编辑器自动导入了这个组件 .. 去掉结尾的分号 ..

再回到 ProductPageCard 组件 .. 把剪切的视图粘贴到这个文件里 ..

在 render 方法里面,再从组件的属性里解构一些东西 .. 需要一个 data 重命名为 product .. 还有一个 indicatorDots .. 它们都来自 this.props ..

组件里需要全局样式,所以要在这个组件里面,添加一个 static options .. 在它里面,把 addGlobalClass 设置成 true ..

在文件顶部再准备一下这个组件里需要的一些东西 .. 除了 View .. 还需要 Text .. Image .. RichText ..

还有一些来自 taro-ui 包里的东西 .. AtBadge .. Swiper .. SwiperItem ..

现在产品内容页面里有些东西就不再需要了 .. 去掉 Text .. Image .. 还有 RichText .. 还有下面的一些 Taro UI 组件 ..

再回到模拟器预览一下,现在的产品内容页面 ...

产品页面卡片组件(ProductPageCard)《 电商小程序案例:产品视图 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点