写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目

1 分段器_uni-segmented-control

nui-ui中的一个组件，也就是标签页，tab栏

2 代码示例

<template><view><view><uni-segmented-control:current="current":values="items.map(value => value.title)"@clickItem="onClickItem"styleType="text"activeColor="#d4237a"></uni-segmented-control><view class="content"><view v-if="current === 0"><home-recommend></home-recommend></view><view v-if="current === 1"><home-category></home-category></view><view v-if="current === 2"><home-new></home-new></view><view v-if="current === 2"><home-album></home-album></view></view></view></view>
</template><script>import homeAlbum from "./home-album";import homeCategory from "./home-category";import homeNew from "./home-new";import homeRecommend from "./home-recommend";export default {name: "index",data(){return{items:[{title:"推荐"},{title:"分类"},{title:"最新"},{title:"专辑"},],current:0}},components:{homeAlbum,homeCategory,homeNew,homeRecommend,},methods:{onClickItem(e){if(this.current != e.currentIndex){this.current = e.currentIndex;}}}}
</script><style scoped lang="scss">
.home_tab {.home_tab_title {position: relative;.title_inner {width: 60%;margin: 0 auto;}.iconsearch {position: absolute;top:50%;transform: translateY(-50%);right: 5%;}}.home_tab_content {}}</style>

3 代码解释

功能，有四个tab栏，点击不同的tab切换到对应的组件
第6行，values，需要的是字符串数组
第8行，styleType对应的上述字符串数组显示的形式，按钮|文本- - -button|text
第9行，activeColor设置的是上述字体的颜色
13，16，19，22行分别是自己定义的组件
56行，onClickItem事件是将current切换成当前点击的tab页面

效果图

微信小程序_uni-app_分段器_uni-segmented-control相关推荐

html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文
摘要随着通信技术的发展和智能设备的普及,移动互联网在近两年发展迅猛,新兴的移动社交软件"微信"逐渐走进了手机用户的生活,深受全国数亿用户的欢迎.随着微信版本的不断更新,微信也 ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
微信小程序实现音乐播放器（2）
文章目录前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器小程序项目 app.json app.wxss pa ...
许嵩音乐智能问答系统微信小程序之音乐播放器
许嵩音乐智能问答系统微信小程序之音乐播放器 - 项目简介项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱你还 ...
微信小程序实现音乐播放器（3）（使用全局数据实现数据共享）
文章目录前情提要搭建静态资源服务器小程序项目 app.json app.js app.wxss pages/index/index.json pages/index/index.wxml pag ...
微信小程序实现音乐播放器（5）
文章目录前情提要 pubsubjs实现页面通信 moment.js实现时间格式化 BackgroundAudioManager 小程序项目 app.json app.wxss app.js page ...
微信小程序实现一个文件管理器
微信小程序实现一个文件管理器虽然标题说是实现一个文件管理器,但我是用来管理预加载小程序可能用的网络资源的,尤其是要是用音效资源时. 小程序的包体即便是分包也是每个分包的资源大小是2m,像音频资源,使 ...
python微信小程序 java电子书阅读器系统uniapp
功能介绍将系统权限按管理员和用户这两类涉及用户划分. (a) 管理员:管理员使用本系统涉到的功能主要有:个人中心.用户管理.类型管理.书城管理.管理员管理.系统管理等功能. (b)用户进入系统前台可 ...
基于微信小程序的音乐播放器设计
目录 1绪论 1 1.1选题背景及意义 1 1.2发展现状 1 1.2.1什么是微信小程序 1 1.2.2小程序市场的现状 4 1.3研究主要内容 4 2系统技术 5 2.1 Java语言 5 2. ...
基于微信小程序java音乐播放器毕业设计论文/程序代码
摘要 5G时代已经慢慢的融入了我们的日常生活,随着国家的通信政策以及各大运营商的宣传的影响,5G手机已经随处可见,面对全球信息.技术空前高速发展,信息高速化发展更是社会进步的一个标志.在全球信息化 ...

微信小程序_uni-app_分段器_uni-segmented-control

1 分段器_uni-segmented-control

2 代码示例

3 代码解释

微信小程序_uni-app_分段器_uni-segmented-control相关推荐

最新文章

热门文章