推荐设备MORE

小程序和APP—微信小程序代理

小程序和APP—微信小程序代理

行业新闻

观澜企业网站建设公司-小程序基础开发(六)

日期:2021-04-26
我要分享
--------

观澜企业网站建设公司

------- (一)简易应用组件的三个流程1.建立自定组件相近于网页页面,一个自定组件由json wxml wxss js4个文档构成

2.申明自定的组件在所需要用到组件的网页页面的json文档中开展申明
{
 "usingComponents": {
 "Tabs":"../../components/Tabs/Tabs"
}
3.应用组件在网页页面中作为一般标识应用便可

(二)组件的款式优化与题目激活选中
//tabs.wxml
 view 
 view 
 view 
 wx:for="{{tabs}}"
 wx:key="id"
 class="title_item {{item.isActive?'active':''}}"
 {{item.name}}
 /view 
 /view 
 view 內容 /view 
 /view 
Component({
 * 组件的特性目录
 properties: {
 * 组件的原始数据信息
 data: {
 tabs:[
 id:0,
 name:"",
 isActive:true
 id:1,
 name:"原創",
 isActive:false
 id:2,
 name:"归类",
 isActive:false
 id:3,
 name:"有关",
 isActive:false
 * 组件的方式目录
 methods: {

题目激活选中

 view 
 view 
 view 
 wx:for="{{tabs}}"
 wx:key="id"
 class="title_item {{item.isActive?'active':''}}"
 bindtap="handleItemTap"
 data-index="{{index}}"
 {{item.name}}
 /view 
 /view 
 view 內容 /view 
 /view 
 //tabs.js
 methods: {
 handleItemTap(e) {
 1、关联点一下恶性事件 在methods中关联
 2、获得被点一下的数据库索引
 3、获得原数字能量数组
 4、对数字能量数组循环系统
 //获得数据库索引
 const { index } = e.currentTarget.dataset;
 //获得data中的数字能量数组
 //等额的于let tabs=this.data.tabs;
 let { tabs } = this.data;
 //循环系统数字能量数组
 tabs.forEach((v, i) = i === index ? v.isActive = true : v.isActive = false);
 this.setData({
 tabs
 }
(三)父向子传送数据信息

父组件的wxml

 !-- 
 demo.wxml
 父组件网页页面向子组件传送数据信息是根据标识特性的方法
 1、在子组件开展接受
 2、把这个数据信息当做data中的数据信息立即应用
 Tabs aaa="123" /Tabs 

子组件的js

 //Tabs.js
 // 里边储放的是要从父组件接受的数据信息
 properties: {
 // 要接受的数据信息的名字
 aaa:{
 // type 要接受的数据信息的种类
 type:String,
 // value 默认设置值
 value:""
 },

子组件的wxml

 view 
 {{aaa}}
 /view 
(四)子向父传送数据信息开启父组件中的自定恶性事件,同时传送数据信息给父组件this.triggerEvent{"父组件自定恶性事件的名字",要传送的主要参数}(五)slot

slot标识实际上就是一个占位符,插槽,当父组件启用子组件的情况下,再传送标识过来,最后这些被传送的标识会取代slot插槽的部位

 Tabs 
 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:elif="{{tabs[3].isActive}}" 3 /block 
 /Tabs 
(六)组件的其它特性 properties:组件的对外特性,是特性名到特性设定的投射表data:组件的內部数据信息,和properties一同用于组件的模版3D渲染observers:组件数据信息字段监视器,用于监视properties和data的转变methods:组件的方式,包含恶性事件响应涵数和随意的自定方式created:组件生命周期涵数,在组件案例刚刚被建立时实行留意此时不可以启用setDataattached:组件生命周期涵数,在组件案例进到网页页面连接点树时实行ready:组件生命周期涵数,在组件合理布局进行后实行 moved:组件生命周期涵数,在组件案例被挪动到连接点树另外一个部位时实行detached:组件生命周期涵数,在组件案例被从网页页面连接点树移除时实行 ---------

观澜企业网站建设公司

------------