微信小程序-自定义NavBar组件

组件化

组件化本身是一个可以讲的很大，也可以浓缩为

封装可复用的，模版组件

基于mvvm的微信小程序当然也支持这一特性，我们做项目的时候也可以把注入公用的header footer之类的封一封（其实工具类的组装也可以作为组件化的一种形式）

小程序的组件化挺有意思的基于Component，自行实现了一套比较深的实现（这篇不讲实现），第一次看感觉跟Page好，或者说是换汤不换药。但内部组件（页面）的生命周期，事件处理等有自己的特点，这个之后再写的时候再提吧

然后微信，本身的sample已经写清楚了一些要素，那我这边也就在这个基础上做发散，官方传送门如下：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

目录结构

这边贴一下代码结构

蓝色是自定义的组件(啊呀，好像没取components/nav这类名字)
红色是引用他的首页

实现

功能来源是https://github.com/Tencent/weui-wxss组件库中提取出来的，我做的工作就是把本来Page页面改成Component，然后给大家理一理过程。

首先是提取功能代码在
dist/example/navbar目录下，有3个文件

我们先完全copy过来，然后添加一个navbar.json文件

navbar.json

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

如果有用到其他组件，那就定义一下，没有的话可以不管。
component要为true。（证明我是谁嘛，这个好理解）

因为设计图只需要2个tab页，所以把navbar.wxml文件进行了微调（没有重要步骤的我就不多做解释了）

<view class="page"><view class="page__bd"><view class="weui-tab"><view class="weui-navbar"><block wx:for="{{tabs}}" wx:key="*this"><view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"><view class="weui-navbar__title">{{item}}</view></view></block><view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view></view><view class="weui-tab__panel"><view class="weui-tab__content" hidden="{{activeIndex != 0}}">PHOTO</view><view class="weui-tab__content" hidden="{{activeIndex != 1}}">BLOG</view></view></view></view>
</view>

这边任意一个点击都会触发tabClick()这个方法

class=”weui-navbar__slider”的这个view用来绘制内容偏移的动画

样式这块，空间本身有一些属性，然后微信这套设计有一个自己的风格，复制的时候从多个地方扣过来。

navbar.wxss

/*!* WeUI v1.1.1 (https://github.com/weui/weui-wxss)* Copyright 2017 Tencent, Inc.* Licensed under the MIT license*/.weui-navbar {margin-top: 50px;display: -webkit-box;display: -webkit-flex;display: flex;position: absolute;z-index: 500;top: 0;width: 100%;border-bottom: 1rpx solid #ccc;
}.weui-navbar__item {position: relative;display: block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;padding: 13px 0;text-align: center;font-size: 0;
}.weui-navbar__item.weui-bar__item_on {color: #F5CD79;
}.weui-navbar__slider {position: absolute;content: " ";left: 0;bottom: 0;width: 50%;height: 3px;background-color: #F5CD79;-webkit-transition: -webkit-transform 0.3s;transition: -webkit-transform 0.3s;transition: transform 0.3s;transition: transform 0.3s, -webkit-transform 0.3s;
}.weui-navbar__title {display: inline-block;font-size: 15px;max-width: 8em;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;
}.weui-tab__panel {box-sizing: border-box;height: 100%;padding-top: 50px;overflow: auto;-webkit-overflow-scrolling: touch;
}

然后就是逻辑选手navbar.js (解释我写在注释里吧)

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置Component({properties: {// 这里定义了tabs属性，属性值可以在组件使用时指定，类似于react的props和proptypetabs: {type: [],value: ["PHOTO1", "BLOG1"],}},data: {// 初始化一些默认值ßactiveIndex: 0,sliderOffset: 0,sliderLeft: 0},created: function () {//空间被创建时触发console.log('--->navbar Component created')var that = this;wx.getSystemInfo({success: function (res) {that.setData({sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex});}});},methods: {// 按钮行为触发状态机变化tabClick: function (e) {this.setData({sliderOffset: e.currentTarget.offsetLeft,activeIndex: e.currentTarget.id});}}
});

触发生命周期如图

也是由内向外计算，渲染，加载

主页面调用

首先，先添加引用

{"usingComponents": {"Nav": "../../common/navbar/navbar"}
}

然后在页面里像使用普通控件一样使用就行了

 <Nav tabs="{{数据源}}"></Nav>

微信小程序-自定义NavBar组件相关推荐

微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
微信小程序自定义倒计时组件及注意事项
倒计时功能实现:微信小程序实现倒计时功能(超简单)_洛潆的博客-CSDN博客_微信小程序倒计时功能由于要在多个页面使用倒计时功能,在每个页面都重新写一遍就会很麻烦,所以可以把它封装为自定义组件,最终 ...
微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
微信小程序-自定义导航组件
一.如何自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在 ...
微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
微信小程序自定义navbar
自定义导航栏项目中需求: 导航栏在插画上, 这时需要采用自定义导航栏实现. 在json配置中把navigationStyle设置为custom, 这时只会保留右上角胶囊按钮. 公共的导航栏编写一个自 ...

微信小程序-自定义NavBar组件

组件化

目录结构

实现

微信小程序-自定义NavBar组件相关推荐

最新文章

热门文章