微信小程序开发4——利用自定义组件实现页面内容切换功能

首先展示一下要显示的功能：`

首先需要在开发者工具中新建一个文件夹（components），分别在文件夹中新建.js .json .wxml .wxcss四个文件（可以右键文件夹，选择新建新建（component）。创建的这个文件我们称为子组件。
然后在开发者工具中再新建一个页面，这个页面称为父组件。
下面我们看一下子组件中的代码：
.wxml

<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.name}}</view>
</view>
<view class="tabs_content">
<slot></slot>
</view>
</view>

.wxss

.tabs_title{display: flex;padding: 10rpx 0;
}
.title_item{flex: 1;display: flex;justify-content: center;align-items: center;
}
.active{color: red;border-bottom: 5rpx solid currentColor;
}

.js

Component({/*** 存放要从父组件中接收的数据*/properties: {
//要接收的数据的名称
// aaa:{
//   //type  标书要接收的数据类型
//   type:String,
//   //value  默认值
//   value:""
// }
tabs:{type:Array,value:[]
}},/*** 组件的初始数据*/data: {},/*** 页面js存放回调函数存放在data同层级下组件的js文件中存放时间的回调函数必须存放在method中*/methods: {handleItemTap(e){
// 绑定点击事件。  获取被点击的索引   获取原数组
// 对数组循环（给每一个循环项 选中属性改为false  给当前索引的项添加激活选中效果）//获取索引
const {index}=e.currentTarget.dataset;
// ("父组件自定义事件名称"要传递的参数)
this.triggerEvent("itemChange",{index});
//获取data中的数组
//  let {tabs}=this.data;  //let tabs=this.data.tabs;  一样//循环数组//[].forEach   遍历数组  遍历数组的时候修改了v 也会导致原数组被修改
//  tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
//  this.setData({
//  tabs
//  })
}}
})

下面是父组件的代码：
.wxml

<!-- 父组件向子组件传递数据   通过标签属性的方式来传递的 \在子组件上进行接收
把这个数据当成data中的数据直接用--><Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>
</Tabs>

.js

Page({/*** 页面的初始数据*/data: {tabs:[{id:0,name:"首页",isActive:true},{id:1,name:"原创",isActive:false},{id:2,name:"分类",isActive:false},{id:3,name:"关于",isActive:false}]},
handleItemChange(e){const {index}=e.detail;let {tabs}=this.data;  tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);this.setData({tabs})
}})

.json

{ "usingComponents": {"Tabs":"../../compoents/Tabs/Tabs"    //子组件的位置}
}

以上就是实现页面内容切换功能的具体代码，下面简单讲解一下：
在父组件的js文件的data中建立tabs数组，在父组件wxml文件中将数组传给子组件（），通过子组件的js文件中的properties来接收数组（tabs:{ type:Array, value:[]}），然后在子组件的wxml文件中进行使用，并且展示到页面，子组件的wxss对页面进行美化。

在子组件中建立点击事件 bindtap="handleItemTap
handleItemTap(e){//这个方法用来获取索引，并且将索引传给父组件
const {index}=e.currentTarget.dataset;
this.triggerEvent(“itemChange”,{index});
接着在父组件页面的tabs标签中加入自定义事件让他等于回调函数（binditemChange=“handleItemChange”）

**handleItemChange(e){//自定义事件，用来接收子组件的数据const {index}=e.detail;let {tabs}=this.data;  tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);//判断如果i=index 就修改isActive的值为true。this.setData({tabs})
}**

最后利用

<slot></slot>和
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>

让页面分别显示不同的内容。
以上就是本人的简单讲解，欢迎大家进行指正！

微信小程序开发4——利用自定义组件实现页面内容切换功能相关推荐

视频教程-微信小程序开发教程（第一阶段、页面设计）（维吾尔语）-HTML5/CSS
微信小程序开发教程(第一阶段.页面设计)(维吾尔语) 毕业于北京邮电大学计算机专业.拥有将近10年的开发经验.精通java.php.python.c/c++.微信开发等等技术! 艾孜麦提阿布都热合曼 ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程序开发：按Pages编译显示页面
最近刚开始接触微信小程序开发,在慢慢学习,开始点击编译总是进入一个界面运行所以比较苦恼,于是找到以下解决方案. 解决方案一:选择"普通编译模式",会进入app.json文件下pag ...
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] vie ...
微信小程序开发入门教程-文本组件介绍
学习小程序开发要从哪开始呢?我们是开始顺序学习官方文档么?如果一开始就从头开始读官方文档,恐怕用不了多久你就放弃了.计算机是一门实践科学,我们学习的目的是为了解决现实问题.要么你想在互联网创业,开发一 ...
微信小程序学习笔记(四)自定义组件
文章目录 1. 组件的创建与引用 1.1 创建组件 1.2 引用组件 1.3 全局引用 VS 局部引用 1.4 组件和页面的区别 2. 样式 2.1 组件样式隔离 2.2 修改组件的样式隔离选项 3. ...
微信小程序学习笔记（自定义组件）
自定义组件开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码掩护.自定义组件在使用是与基础组件非常相似. 创建自定义组件 ...
微信小程序开发笔记1——使用npm脚本实现自动化切换环境配置
博客更新地址啦-,欢迎访问:https://jerryyuanj.github.io/blog 写在前面有过小程序开发经验的都知道,在小程序的生态环境中,是很难做到像其他项目那样完全的CI的,因为我 ...
微信小程序开发（四）跳转页面、传递参数获得数据
上一篇:微信小程序学习笔记(三) 上一篇获得博客数据如下图,现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到 ...

微信小程序开发4——利用自定义组件实现页面内容切换功能

微信小程序开发4——利用自定义组件实现页面内容切换功能相关推荐

最新文章

热门文章