ArthurSlog
SLog-94
Year·1
Guangzhou·China
October 10th 2018
个人网站:http://www.arthurslog.com
CSDN:https://blog.csdn.net/u010997452/article/list/1
GitHub:https://github.com/BlessedChild/ArthurSlog
NPM:https://www.npmjs.com/~arthurslog
掘金:https://juejin.im/user/59f2a424f265da432f305c66/posts
简书:https://www.jianshu.com/u/b9ebe10f0534
segmentfault:https://segmentfault.com/u/arthurslog/articles
夫轻诺必寡信 多易必多难 是以圣人犹难之 故终无难矣
开发环境MacOS(Mojave 10.14 (18A391))
信息源
Less
Webpack
jakoblind
开始编码
本次更新的内容:
其中,再React框架中,父组件通过向子组件传递回调函数,使得子组件可以修改父组件中的值
在父组件件中,为四个主界面设定了paageId,分别是0、1、2、3,一起放入一个index对象中
同时把父组件的state中的pageId作为index对象的索引
然后在四个bottomTabBar上绑定点击事件
点击的同时,调用父组件里的函数,并把绑定在TabBar上的pageId传递过去
父组件调用setState()方法,把pageId赋值给父组件state中的pageId
因此,父组件中 index对象的索引发生改变
页面重新渲染
这样就实现了四个主界面跳转的逻辑
以下是相关的代码:
./App.js
./pages/storeIndex/bottom/Bottom.jsx
在开发的过程中 常会碰到一些不太理想的情况
所以需要以结果为导向 先把基础功能实现出来
工程文件已经上传至Github:https://github.com/BlessedChild/ArthurSlogStore_1
距离一个基础的商城还缺点东西 下次接着补充
至此,完成了四个主界面的文件结构的调整 以及底部TabBar的关联和跳转逻辑。
如果你喜欢我的文章 欢迎点赞 留言
谢谢
领取专属 10元无门槛券
私享最新 技术干货