大概是这么个回事 让导航条是个 scroll-view 可以网右滑动(API自己去看即可哈)
·组件化开发 组件记得 开启 组件属性 为 true:
TAB 组件 的 开发:
首先定义个组件 叫 tabs ,然后wxml 写:
样式:
JS文件逻辑讲解:
初始化data 有 tabData 和 active 。
当 tabs 组件 生成完毕后 我们设置他的生命周期创建完毕的去加载分类: 里面设置了 active 为 0 ,默认为第一个导航项嘛
然后我们在wxml wx:for 让他显示出来:
然后出来就是这样的:
点击的时候 我们需要更改 active的值: ,组件页面中的tab子项写一下点击事件即可:
其次我们点击他要有一个字体变红的效果:其实就是上面的 active了, 如果active 会对于 wxfor 循环的 index 那么加上active 然后设置active 颜色为红色:
所以active的更改我们用到 数据监听器监听更改 并把id 传给父组件 const { id } 是 ES6 语法 —— 为什么要把 端口中的 id 传递给父组件? 因为后面list 要用到。
开发 List 文章列表 组件:
首先 放个scroll-view 进去 关于scroll-view y轴扩张如果没效果 记得加上固定高度。
我们 list 思路大概是这样的: 我们点击 tab 子项 (tabs的active 改变) 那我们就更换 List 的内容。
所以用到了兄弟传值 然后 数据监听器进行监听:【我们tabs 当active 更改时 已经把 端口的 id 传给 父了】,父拿到 id 再次 传递给 tabs ,然后list通过数据监听器 监听到 传递过来的id 发生变化 ,那么就实现更换内容。
这里逻辑很普遍的 不懂可以慢慢懂哦 也可以评论 !欢迎交流!
index.wxml:
那么id已经传给父了 ,父要传给list: 然后我们要在 组件的 属性列表中定义tabld ,然后tabld 一旦更改 我们就 监听就发送请求更换 List 的数据。
index.JS :
封装组件属性 和 初始化属性: 封装请求函数:
最后一步 ,当父给的 tabId 发生改变,我们监听器监听到,就进行 请求 ,把 tabId 当参数发给后端,从而更新 列表数据 (dataList)
最后我们循环遍历出来: List.wxml 文件:
对应的 list-item 的 wxss :
成果:
谢谢阅读!
开发多次uniapp 的 scrollView 发现
scrool View
如果是 Y 滚动的话 一定得给个绝对高
如果是X滚动 绝对宽 + white-space: nowrap; 不换行! 而且 滑块子项最好是 行内块.