基于mpvue实现Tab效果——flex布局

基于mpvue实现Tab效果——flex布局

基本布局 <div class="tab"> <div class="title" @click='handleChange'> <!-- Vue模板中支持小程序原生组件 --> <button data-index='0' :class="{active: currentIndex===0}">apple</button> <button data-index='1' :class="{active: currentIndex===1}">orange</button> <button data-index='2' :class="{active: currentIndex===2}">banana</button> </div> <div :class="['item', {active: currentIndex===0}]">苹果</div> <div :class="['item', {active: currentIndex===1}]">橘子</div> <div :class="['item', {active: currentIndex===2}]">香蕉</div> </div> 功能实现 methods: { handleChange (e) { let index = e.target.dataset.index this.currentIndex = parseInt(index) } }

第一步：在pages文件夹下，新建demo文件夹

第二步：在demo文件夹下，新建index.vue文件和main.js文件

main.js文件内容固定，如下

import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount()

第三步：在src下的app.json文件中进行引入

{ "pages": [ "pages/index/main", "pages/logs/main", "pages/demo/main" //引入入口文件 ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#999", "backgroundColor": "#fafafa", "selectedColor": "#333", "borderStyle": "white", "list": [{ "text": "首页", "pagePath": "pages/index/main", "iconPath": "static/tabs/home.png", "selectedIconPath": "static/tabs/home-active.png" }, { "text": "订单", "pagePath": "pages/logs/main", "iconPath": "static/tabs/orders.png", "selectedIconPath": "static/tabs/orders-active.png" }, // 增加底部测试导航栏模块 { "text": "测试", "pagePath": "pages/demo/main", "iconPath": "static/tabs/orders.png", "selectedIconPath": "static/tabs/orders-active.png" }] } }

注意：

新建文件，都需要进行重新启动项目；修改文件，不需要进行重新启动项目

第四步：添加编译模式，选择demo路径，进行编译

第五步：在demo文件夹下的demo.index文件中，进行操作页面

<template> <div> <div class="tab"> <div class="title" @click='handleChange'> <!-- Vue模板中支持小程序原生组件 --> <button data-index='0' :class="{active: currentIndex===0}">apple</button> <button data-index='1' :class="{active: currentIndex===1}">orange</button> <button data-index='2' :class="{active: currentIndex===2}">banana</button> </div> <div :class="['item', {active: currentIndex===0}]">苹果</div> <div :class="['item', {active: currentIndex===1}]">橘子</div> <div :class="['item', {active: currentIndex===2}]">香蕉</div> </div> </div> </template> <script> export default { data () { return { currentIndex: 0 } }, methods: { handleChange (e) { let index = e.target.dataset.index //字符串转换为数字 this.currentIndex = parseInt(index) } } } </script> <style scoped> //flex布局 .tab .title { display: flex; } .tab .title button { flex: 1; } .tab .title button.active { background: #eee; } .tab .item { width: 750rpx; height: 400rpx; line-height: 400rpx; text-align: center; background: #eee; display: none; } .tab .item.active { display: block; } </style>

图例：