uni-app学习(四):带有下划线的标签选择

学了一周uni-app，写个小demo，试试水~

效果图：点击不同场景，下划线切换相应标签下

简单整理了下实现过程，先创建视图容器含有三个标签，场景一，二，三

容器：

<template><view class="cjView"><view class="select-view"><view class="text-item" @tap="selectItem1('场景一')"><text>场景一</text></view><view class="text-item" @tap="selectItem1('场景二')"><text >场景二</text></view><view class="text-item" @tap="selectItem1('场景三')"><text >场景三</text></view></view></view></template>

样式：

.select-view {width: 100%;height: 50rpx;margin-top: 10rpx;margin-bottom: 45rpx;margin-left: 10rpx;margin-right: 10rpx;.text-item {align-items: center;display: inline-block;width: 15%;text {width: 30%;font-size: 24rpx;border: none;height: 50rpx;}
}}

效果图：

创建view做下面的下划线，显隐根据绑定标签

<template><view class="cjView"><view class="select-view"><view class="text-item" @tap="selectItem1('场景一')"><text>场景一</text><view class="line-Box" v-if="selectId=='场景一'"></view></view><view class="text-item" @tap="selectItem1('场景二')"><text >场景二</text><view class="line-Box1" v-if="selectId=='场景二'"></view></view><view class="text-item" @tap="selectItem1('场景三')"><text >场景三</text><view class="line-Box2" v-if="selectId=='场景三'"></view></view></view></view></template>

下划线样式

.line-Box {background-color: black;width: 40%;height: 3rpx;margin-top: 5rpx;margin-right: 15rpx;margin-left: 15rpx;}.line-Box1 {background-color: black;width: 40%;height: 3rpx;margin-top: 5rpx;margin-right: 15rpx;margin-left: 15rpx;}.line-Box2 {background-color: black;width: 40%;height: 3rpx;margin-top: 5rpx;margin-right: 15rpx;margin-left: 15rpx;}

标签点击改变selectId

methods: {selectItem1(res) {this.selectId = resconsole.log(res)}}

ok，效果实现

初学uni-app，样式啥的还是小白级，权当一个思路提供~

uni-app学习(四):带有下划线的标签选择相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
Python语言学习之双下划线那些事：python和双下划线使用方法之详细攻略
Python语言学习之双下划线那些事:python和双下划线使用方法之详细攻略目录双下划线介绍 1.关于双下划线的函数或方法或属性双下划线介绍 1.关于双下划线的函数或方法或属性 __name_ ...
配置hadoop时，Linux主机名称不要带有下划线
Linux主机名称不要带有下划线啊,否则报ERRORorg.apache.hadoop.hdfs.server.namenode.NameNode: java.lang.IllegalArgument ...
使用Java生成带有下划线字体的文字
HashMap<TextAttribute, Object> hm = new HashMap<TextAttribute, Object>(); hm.put(TextAtt ...
[转载]使用Java生成带有下划线字体的文字
在.net中,对于Font类来说,可以直接使用常量来生成带有下划线的字体. 但是,到了Java中,想生成带有下划线的字体,就稍微复杂了一点,需要借助于TextAttribute类来生成,具体请参照下面 ...
【Python学习笔记】下划线的含义
[Python学习笔记]下划线的含义 1.单前导下划线_var 2. 单末尾下划线var_ 3. 双前导下划线__var 4. 双前导和末尾下划线__var__ 5. 单下划线_ 在Python中单下 ...
matlab 中在图的title中放入多个变量的值，以及正确显示带有下划线的字符串
转载自:https://blog.csdn.net/ldj1208/article/details/51445835 https://blog.csdn.net/lingyunxianhe/artic ...
Android Compose 新闻App（四）下拉刷新、复杂数据、网格布局、文字样式
Compose 新闻App(四)下拉刷新.复杂数据.网格布局.文字样式前言正文一.下拉刷新 ① 添加依赖 ② 使用 ③ 样式更改二.刷新数据三.复杂数据四.复杂列表 ① 更改返回数据 ② ...
学习笔记——使用下划线命名的规则
在刷牛客时遇到一道关于python中使用下划线命名的题,我重复刷了两次了还是做错...所以今天就把这题给记录下来 (不定项选择题) Python中单下划线foo与双下划线_ foo与__ foo__ ...

uni-app学习(四):带有下划线的标签选择

uni-app学习(四):带有下划线的标签选择相关推荐

最新文章

热门文章