uni-app中左侧tab选项卡的实现效果

一、效果图
二、代码

一、效果图

二、代码

<template><view><view class="choose-tab"><view class="choose-item" v-for="(item,index) in list" :class="chooseTab == index ? 'active' : ''" :data-choose="index" @click="clickTab">{{item.name}}</view></view><view class="content"><view v-for="(item,index) in list" :style="chooseTab != index ? 'display:none' : ''">{{item.content}}</view></view></view>
</template><script>export default {data() {return {chooseTab: 0, //当前选中的选项卡：默认选中第一个~list: [{"id":1,"name":"选项1","content":"1对应的内容"},{"id":2,"name":"选项2","content":"二内容"},{"id":3,"name":"选项3","content":"three content"},{"id":4,"name":"选项4","content":"1+1+1+1=4"},],}},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},methods: {clickTab: function (e) { //点击切换this.chooseTab = e.target.dataset.choose;//如果是微信小程序，可使用该方法改变当前设置的值/*this.setData({chooseTab: e.target.dataset.choose})*/}}}
</script><style>.choose-tab {position: absolute;width: 25%;height: 90rpx;line-height: 90rpx;text-align: center; }.choose-item {background-color: #F7F7F7;}.active {background-color: white;}.content {margin-left: 25%;padding: 15rpx;}
</style>

uni-app中左侧tab选项卡的实现效果相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
html5怎么设置视频快进,如何在剪映APP中给视频设置快进效果
如何在剪映APP中给视频设置快进效果今天给大家介绍一下如何在剪映APP中给视频设置快进效果的具体操作步骤. 1. 打开手机上的剪映APP,进入主页面后,点击页面上的开始创作,然后选择想要设置的视频导 ...
动态添加layui中的tab选项卡
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name=& ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
html怎么键tab键,html中控制Tab键的顺序
在做项目中,需要控制html页面上登陆表单的按Tab键的顺序,代码如下: 账号:昵称: 备注:这里的tabIndex的值可为0至32767之间的任意数字当浏览者使用TAB键在网页控件中移动时,将首 ...
如何使用HTML制作tab选项卡
共有10个步骤 1.首现我们进入DW 2.我们新建一个html文档,在新建一个css样式文件,将它们放入同一文件夹下.用link标签将css外部样式文件引入HTML文档 3.之后我们给它一个div,设 ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏
原标题:Tab选项卡切换完整思路及实现,值得珍藏这篇文章是从微信上转载过来的,原文作者是"Java实例解析",文章内容很棒,只是这个作者可能是一时看不到效果,所以没更新几篇就放弃 ...

uni-app中左侧tab选项卡的实现效果

一、效果图

二、代码

uni-app中左侧tab选项卡的实现效果相关推荐

最新文章

热门文章