微信小程序自定义组件-自定义顶部-Component

Dear 丶 2021-07-25 01:15 630阅读 0赞

## 前言：在不同的页面重复使用自定义组件;自定义组件可以理解一个页面，在不同页面显示出来，一个自定义的组件也是由json、wxml、wxss、js 4个文件组成的，下面点击tabar页面切换显示自定义顶部为示例。 ##

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

官网：[https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html][https_developers.weixin.qq.com_miniprogram_dev_reference_api_Component.html]

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

**gif效果图片-最终效果：**  
![在这里插入图片描述][20200328133603487.gif]

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

## **目录结构** ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

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

## **一.创建自定义组件** ##

注:在"pages": \[\]里面需要写自定义组件的路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]  
**PS：组件代码-header.wxml**

<view style="background:#e93323;height:{ {navH}}rpx;">
    	<view style='height:{ {navH}}rpx;position: relative;'>
    		
    		<view style="position: absolute;bottom: 0;width: 100%;height: 100rpx;align-items: center;display: flex;justify-content: space-around;">
    			<view style="color: white;font-size: 30rpx;font-weight: bold;">{ { parameter.title}}</view>
    		</view>
    		
    	</view>
    </view>

**PS：组件代码-header.js**  
注：data里面的navH是在app.js获取的屏幕高度并且计算返回的自定义顶部的高度

var app = getApp();
    Component({ 
    	properties: { 
    		parameter: { 
    			type: Object
    		}
    	},
    	data: { 
    		navH: ''
    	},
    	attached: function() { 
    		this.setData({ 
    			navH: app.globalData.navHeight
    		});
    	}
    })

**PS：组件代码-header.json**

{ 
      "usingComponents": { },
      "component": true
    }

**PS：app.js代码**

App({ 
      onLaunch: function() { 
        // 获取导航高度；
        wx.getSystemInfo({ 
          success: res => { 
            //导航高度
            this.globalData.navHeight = res.statusBarHeight * (750 / res.windowWidth) + 97;
          },
          fail(err) { }
        });
      },
      globalData:{ 
        navHeight: 0,
      },
      globalData: { 
        userInfo: null
      }
    })

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

## **二.引入组件-index首页为例** ##

**1、index.json**  
PS：header是自定义的组件名称,在wxml调用;disableScroll是禁止下拉

{ 
      "usingComponents": { 
        "header": "/components/header/header"
      },
      "disableScroll": true
    }

**2、index.wxml**  
PS:parameter是属性名称，上面gif图片可以看到切换到不同的页面顶部的文字会发生改变，也就是tabar页面的data里面定义了parameter的title

**3、index.js**

Page({ 
      data: { 
        parameter: { 
          'title': '首页'
        },
      }
    })

[https_developers.weixin.qq.com_miniprogram_dev_reference_api_Component.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
[20200328133603487.gif]: /images/20210724/dd1150ea4d024188a75ffb12dc8f7fbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/b01b5ad108544bad910c9ba14bad54b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/d0ae27229e124cdfb1549575bfaae466.png