uni-app分段器


<template><view><view class="uni-padding-wrap uni-common-mt"><!-- 分段器 导航跳转不同组件--><uni-segmented-control :current="current" <!-- 操作数组 -->:values="items.map(v => v.title)" style-type="text" :active-color="activeColor"@clickItem="onClickItem" /></view><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 === 3"><!-- 导航组件页面 --><home-album></home-album></view></view></view>
</template><script>import homeAlbum from "./home-album/home-album.vue";import homeRecommend from "./home-recommend/home-recommend.vue";import homeNew from "./home-new/home-new.vue";import homeCategory from "./home-category/home-category.vue";export default {components: {},data() {return {items: [{title : "推荐"},{title : "分类"},{title : "最新"},{title : "专辑"},],styles: [{value: 'button',text: '按钮',checked: true},{value: 'text',text: '文字'}],current: 0,colorIndex: 0,activeColor: '#d4237a',}},methods: {onClickItem(e) {if (this.current !== e.currentIndex) {this.current = e.currentIndex}}},components: {homeAlbum,homeRecommend,homeNew,homeCategory}}
</script><style lang="scss">.example-body {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;padding: 0;}.uni-common-mt {margin-top: 30px;}.uni-padding-wrap {// width: 750rpx;// padding: 0px 30px;}.content {/* #ifndef APP-NVUE */display: flex;/* #endif */justify-content: center;align-items: center;height: 150px;text-align: center;}.content-text {font-size: 18px;color: $uni-text-color;}.color-tag {width: 25px;height: 25px;}.uni-list {flex: 1;}.uni-list-item {/* #ifndef APP-NVUE */display: flex;/* #endif */flex: 1;flex-direction: row;background-color: #FFFFFF;}.uni-list-item__container {padding: 12px 15px;width: 100%;flex: 1;position: relative;/* #ifndef APP-NVUE */display: flex;box-sizing: border-box;/* #endif */flex-direction: row;justify-content: space-between;align-items: center;border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: $uni-border-color;}.uni-list-item__content-title {font-size: 16px;}
</style>

uni-app分段器相关推荐

二、uniapp项目（分段器的使用、scroll-view、视频下载、转发）
一.分段器组件的使用 uniapp官方文档 <template><view class="category"><view class="ca ...
UISegmentedControl 分段器加载不同的viewcontroller
#import <UIKit/UIKit.h>@interface MJSegmentViewController : UIViewController /*** @brief 设置切换不 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
关于uni-app中SegmentedControl 分段器不显示的问题
又到了毕设的季节,年前考研随手开题报告就写了一个关于uni-app的开发,本来想着应该简单,结果在看https://www.bilibili.com/video/BV1D5411t74T?p=27&a ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

uni-app分段器

uni-app分段器相关推荐

最新文章

热门文章