2.微信小程序（colorUI）- 构建底部操作条

写在前面：colorUI中提供了很多好看的底部操作条，如何使用这些底部操作条让我们的项目看起来更美观（ps：微信小程序的底部操作条tabBar总感觉少了点什么）。
一、在colorUI中找到自己想要的底部操作条，并将其拷贝至index.wxml中。

二、添加名为foot 的class，让导航条处于页面底部。

<view class="cu-bar tabbar bg-white shadow foot">

三、给每个导航加上bindtap点击事件和自定义属性data-xxx。

<view class="action text-green" bindtap="changeNav" data-nav="homePage">

关于自定义属性的设置和获取：标签里使用data-属性名="属性值"进行设置，使用e.currentTarget.dataset.属性名进行获取。

四、index.js中写上对应方法

Page({data: {pageNav: 'homePage'},changeNav(e) {this.setData({pageNav:e.currentTarget.dataset.nav})},
})

点击哪个导航，e.currentTarget.dataset.nav就能获取到那个导航中设置的data-nav属性值。
五、点击之后导航高亮。
在class中使用三元表达式，根据pageNav的值来判断导航是否高亮。

<view class="action {{pageNav=='homePage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="homePage">

六、完善底部操作条。
1.在app.json的pages中添加页面路径

"pages": ["pages/index/index","pages/homePage/index/index","pages/myPage/index/index"],

保存之后，pages文件下自动创建相关文件

2.回到index文件夹下，在index.json文件中，注册组件

"usingComponents": {"home-page": "/pages/homePage/index/index","my-page": "/pages/myPage/index/index"}

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径。

3.在index.wxml文件夹中，使用组件

<home-page></home-page>
<my-page></my-page>

4.根据pageNav的值，使用wx-if来控制组件的显示隐藏

<home-page wx-if='{{pageNav == "homePage"}}'></home-page>
<my-page wx-if='{{pageNav == "myPage"}}'></my-page>

七、相关代码及效果
index.wxml:

<!--pages/index/index.wxml-->
<home-page wx-if='{{pageNav == "homePage"}}'></home-page>
<my-page wx-if='{{pageNav == "myPage"}}'></my-page>
<view class="cu-bar tabbar bg-white shadow foot"><view class="action {{pageNav=='homePage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="homePage"><view class="cuIcon-homefill"></view> 首页</view><view class="action {{pageNav==''?'text-green':'text-gray'}}" bindtap="changeNav" data-nav=""><view class="cuIcon-similar"></view> 分类</view><view class="action {{pageNav==''?'text-green':'text-gray'}} add-action" bindtap="changeNav" data-nav=""><button class="cu-btn cuIcon-add bg-green shadow"></button>发布</view><view class="action {{pageNav==''?'text-green':'text-gray'}}" bindtap="changeNav" data-nav=""><view class="cuIcon-cart"><view class="cu-tag badge">99</view></view>购物车</view><view class="action {{pageNav=='myPage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="myPage"><view class="cuIcon-my"><view class="cu-tag badge"></view></view>我的</view>
</view>

Index.json:

{"usingComponents": {"home-page": "/pages/homePage/index/index","my-page": "/pages/myPage/index/index"}
}

Index.js:

// pages/index/index.js
Page({data: {pageNav: 'homePage'},changeNav(e) {this.setData({pageNav:e.currentTarget.dataset.nav})},
})

2.微信小程序（colorUI）- 构建底部操作条相关推荐

微信小程序适配iPhoneX底部小黑条
微信小程序适配 iPhone X 底部小黑条一.在 app.js 中获取到设备信息 getSystemInfo 获取设备信息,然后将底部距离保存到 globalData 中方便页面读取当然如果项目 ...
微信小程序兼容手机底部横条适配
方法一. 1.采用下面方式进行判断是否有底部横条 let res = wx.getSystemInfoSync(); if (res.model.indexOf('iPhone X') > -1 ...
微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
微信小程序一键置顶操作详解：
微信小程序一键置顶操作详解: 第一种方式:采用scroll-view滚动视图实现第二种方式,直接用view实现第一种方式:采用scroll-view滚动视图实现下面是代码简介: wxml文件代码 ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
微信小程序认证成功怎么操作
微信小程序认证成功怎么操作?要花你多少钱呢! 现在是Z世代,新能源车.芯片.AI的时代了,不会还有企业.店铺,想通过聘请程序员,或者花个大几万去开发一个微信小程序吧. 不会吧,这不会是真的吧. 今天珍 ...
微信小程序如何通过js操作wxmll的wxss属性
微信小程序如何通过js操作html的css属性在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中 ...
微信小程序实现通过js操作wxml的wxss属性示例
微信小程序实现通过js操作wxml的wxss属性示例前言实现思路实现代码前言在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行 ...
多功能工具箱微信小程序源码下载-操作简单实用流量主小程序
这是一款多功能工具箱小程序! 目前由N款小功能组合成比如: 图片拼接九宫格切图透明昵称文字表情等等上面说的只是一部分该款小程序无需服务器与域名使用微信开发者工具打开文件然后上传提交审核即 ...

2.微信小程序（colorUI）- 构建底部操作条

2.微信小程序（colorUI）- 构建底部操作条相关推荐

最新文章

热门文章