用户登录

新建一个产品内容页面 .. 放在 pages .. product 下面,名字是 show.js .. 在文件里面,添加一个基本的 Taro 页面 .. 名字是 ProductShow ..

页面视图可以随便添加点内容 .. 一个 View .. 加上 page-demo .. 文字是 Product .. 有了新的页面需要再注册一下 .. 打开应用的入口文件 app.js .. 在 config 的 pages 里面 .. 添加一个新的页面 .. 地址是 pages/product/show ..

点击内容列表里的项目可以打开对应的产品页面 .. 在这个 ProductList 组件上面 .. 添加一个 onClickListItem 属性 .. 绑定一个 this.onClickListItem ..

在上面再去添加这个方法 .. 名字是 onClickListItem .. 接收一个 id 参数 ... 在这个方法里面,用一下 Taro.navigateTo .. 转跳页面 .. 配置一下 .. url 是页面的地址 .. 产品页是 /pages/product/show .. 跳转页面的时候带着一个 id 参数 .. 对应的值就是这个这个方法的 id 参数的值 ..

然后再打开定义 ProductList 组件的地方 .. 在这个 ProductListItem 组件上面,添加一个 onClick .. 用一下 this.props.onClickListItem .. 给它 bind 一个 this .. 还有 product.id 这个 .. 就是产品的 id 号 ..

打开 ProductListItem 组件 ..

在这个组件的 View 上面 .. 添加一个 onClick .. 用一下 this.props.onClick ..

回到模拟器 .. 再试一下 ..

按一下产品列表里的项目 .. 可以打开产品内容页面 ..

产品内容页(Product)《 电商小程序案例:产品内容 》

统计

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

社会化网络

关于

微信订阅号

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