小程序实现导航栏效果————（2019.12.23学习笔记）

首先新建一个自定义组件，组件名随意，这里我设置的组件名为My-tab,新建完组件之后，第一件事就是声明好导航栏可能需要用到的样式（代码如下）

/* Accessories/My_tab/My_tab.wxss */
.tab-contrl{display: flex;/*弹性布局*/height: 88rpx;line-height: 88rpx;}
.tab-item{flex: 1; text-align: center
}
.active{color: red;}
.active text{padding: 20rpx 16rpx;border-bottom: 6rpx solid red
}

声明完样式之后，先不着急使用样式制作导航栏UI，先声明好导航栏可能使用的点击事件或数据（代码如下）

// Accessories/My_tab/My_tab.js
Component({/*** 组件的属性列表*/properties: {titles:{//新建名为titles的变量，变量类型为Array，默认值为空type:Array,value:[]}},/*** 组件的初始数据*/data: {currentIndex: 0},/*** 组件的方法列表*/methods: {onItemClick(event){const index= event.currentTarget.dataset.index;//新建index变量，用来装载被点击组件的index值this.setData({currentIndex: index//将index值传给变量currentIndex})this.triggerEvent('itemclick', { index, title: this.properties.titles[index] }, {})//设置触发事件类型为itemclick，并使用detail对象装载被点击的index值，与其对应的标题，最后设置触发事件选项为空}}
})

声明好的点击事件内部逻辑大致为，当组件被点击后，会接收被点击组件对应的index值，然后将接收好的index值传给js文件中新建的currentIndex变量，这个变量以后先不用，之后能在制作导航栏UI的时候能用到，最后将接收好的index值与index对应的标题，通过triggerEvent传给detail对象，然后利用detail对象的数据可在父组件使用的特性，将index传给父组件。

声明完点击事件之后，就可以开始着手导航栏UI了，这里利用之前在点击事件获取到index值得变量currentIndex，写一个三元运算判断currentIndex，当currentIndex不为空则让当前被点击的组件使用样式active，也就是字体变红出现下划线的样式，然后在外层套个block，利用wx：for遍历从父组件传来的标题数组，最后在最外层用view包裹，并使用之前声明好的tab-contrl样式（代码如下）

<view class="tab-contrl">
<block wx:for="{{titles}}" wx:key="{{index}}">
<view class='tab-item {{currentIndex==index?"active":""}}'bindtap='onItemClick'data-index="{{index}}"><text>{{item}}</text></view>
</block>
</view>

这样组件完成了，只剩下引用了，老规矩，先在父组件的json文件声明（代码如下）

"My_tab":"/Accessories/My_tab/My_tab"

声明之后，直接在父组件调用，但因为这个组件需要父组件传来标题组文本才能生成，所以在调用此组件的时候记得输入标题组文本，然后为了能在Console上看到该子组件被点击后打印的event，这里还添加了绑定了一个名为handleTabClick的点击事件（代码如下）

<!--Pages/Grammer/Grammer.wxml-->
<My_tab titles="{{['衣服','裤子','鞋子']}}"bind:itemclick="handleTabClick"/>

点击事件handleTabClick的代码如下

// Pages/Grammer/Grammer.jshandleTabClick(event){console.log(event)},

这样在父组件点击子组件之后，在Console上会打印event，并且其中detail对象的值是在子组件JS文件中赋予的（效果图如下）

然后组件总体效果图如下

小程序实现导航栏效果————（2019.12.23学习笔记）相关推荐

说一说要求小程序自定义导航栏的需求有多沙雕
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在超级App 内被便捷地获取和传播,同时具有出色的使用体验. 在小程序项目中自定义导航栏绝对算得上是最恶心的需求之一.本篇文章 ...
taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏（完美适配所有手机）...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
小程序自定义导航栏（完美适配所有手机）解决上下不居中左右不对齐高度不协调问题...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
小程序自定义导航栏（适配不同手机）——拿来就用
基本思路写自定义导航组件的时候,需要将组件结构一分为二:状态栏 + 标题栏状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取标题栏高度:安卓:48px, ...

小程序实现导航栏效果————（2019.12.23学习笔记）

小程序实现导航栏效果————（2019.12.23学习笔记）相关推荐

最新文章

热门文章