大概是这么个回事让导航条是个 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; 不换行！而且滑块子项最好是行内块.

微信小程序组件化开发实现导航分类文章小程序相关推荐

微信小程序 - 组件化开发
微信小程序 -- 组件化开发,总结一下开发思路及过程: 组件,类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成. 1.首先,在 miniprogram 文件夹下,创建一个 ...
微信小程序组件化开发
文章目录前言项目需求一般方式开发第一步:分析布局第二步:编写代码第三步:效果预览第四步:对比差异修改样式实现方式总结自定义组件开发第一步:新建文件夹和组件第二步:编写wxml结构 ...
微信小程序-组件化开发（上）
微信小程序(以下简称"小程序",版本)虽然默认定义了很多有用的组件,但是在开发小程序过程中,往往需要自定义业务组件. 而小程序开发者文档中却未对自定义组件给出很好的解决方案或示例. ...
[微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用 ...
微信小程序 | 小程序组件化开发
云开发：微信小程序开发-组件化开发
云开发之:微信小程序组件化开发下图是微信小程序的目录结构,components文件夹主要存放组件的代码我们在components目录下新建一个playlist组件(是一个文件夹,结构和小程序页面一 ...
【小程序】组件化开发的基本使用(一)
文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节小程序组件化开发基本使用小程序组件化思想组件插槽定义使用小程序在刚刚推出时是不支持组件化的, 也是为人诟 ...
Android之组件化开发
转载请标明出处:[顾林海的博客] 个人开发的微信小程序,目前功能是书籍推荐,后续会完善一些新功能,希望大家多多支持! ##前言在以前的项目中都是建一个基础库,项目依赖基础库,主项目中集成了所有的功能 ...
微信小程序基础3【组件化开发、自定义组件、全栈开发、使用Express】
视频地址: https://www.bilibili.com/video/BV1cW411T7t6 [2018]学做小程序- 清华大学 https://www.bilibili.com/video/ ...

微信小程序组件化开发实现导航分类文章小程序

大概是这么个回事让导航条是个 scroll-view 可以网右滑动(API自己去看即可哈)

·组件化开发组件记得开启组件属性为 true：

TAB 组件的开发：

开发 List 文章列表组件：

谢谢阅读！

开发多次uniapp 的 scrollView 发现

微信小程序组件化开发实现导航分类文章小程序相关推荐

最新文章

热门文章

微信小程序 组件化开发 实现 导航分类文章 小程序

大概是这么个回事 让导航条是个 scroll-view 可以网右滑动(API自己去看即可哈)

·组件化开发 组件记得 开启 组件属性 为 true：

TAB 组件 的 开发：

开发 List 文章列表 组件：

谢谢阅读！

开发多次uniapp 的 scrollView 发现

微信小程序 组件化开发 实现 导航分类文章 小程序相关推荐

最新文章

热门文章

微信小程序组件化开发实现导航分类文章小程序

大概是这么个回事让导航条是个 scroll-view 可以网右滑动(API自己去看即可哈)

·组件化开发组件记得开启组件属性为 true：

TAB 组件的开发：

开发 List 文章列表组件：

微信小程序组件化开发实现导航分类文章小程序相关推荐