产品页导航栏标题(setNavigationBarTitle)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

页面最上面这里有一个标题,它是导航栏上的标题文字 .. 这个标题文字除了在页面的 config 里面可以设置 .. 我们也可以使用 Taro 的 setNavigationBarTitle 这个方法动态的去设置 ..

回到编辑器 .. 先打开 ProductList 组件 .. 这里可以改造一下给 onClickListItem 绑定的参数 .. 把 product.id 换成 product 对象 ..

再打开 ShopIndex 页面 .. 找到 onClickListItem 这个事件处理方法 .. 现在它接收一个 product 参数 .. 它是一个对象 ..

在方法里面,可以从 product 对象里面,把 id 属性解构出来 .. 还有 name 属性 .. 它是产品的标题 .. 或者也可以这样 .. 直接在方法的参数里面 .. 把 id ,还有 name 从 product 对象参数里解构出来 ..

跳转页面的时候,带着一个 id 参数 .. 后面再添加一个 name 参数 .. 它的值是 name .. 这个 name 就是产品的名字 ..

然后再回到产品内容页面 ..

在 componentWillMount 里面 .. 把 name 参数从路由参数对象里解构出来 ..

下面再用一下 Taro 上的 setNavigationBarTitle 方法 .. 一个对象参数 .. 里面添加一个 title ,标题文字是 name ,就是产品的名字 ..

再去模拟器试一下 .. 打开一个产品内容 ... 这回导航栏上的标题就会是产品的名字 ...

这个设置标题的动作也可以在请求得到了产品数据以后再执行一下 .. 放在 fetchDataSuccess 里面 .. 标题的值是 data 里的 name ..

产品页导航栏标题(setNavigationBarTitle)《 电商小程序案例:产品内容 》

统计

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

社会化网络

关于

微信订阅号

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