|
本帖最后由 penghao@wifi.co 于 2019-9-26 18:23 编辑
class= "doc-page">
<text>以下这是框架的缺陷吗?text>
<text>情况一:这里状态不改变?:{{JSON.stringify(tabIsLoadArr)}} - text>
<text>情况二:这里状态就能改变:{{JSON.stringify(tabIsLoadArr)}} - {{current_index}}text>
<tabs class= "tabs" onchange= "changeTabactive" index= "0">
class="tab-bar" mode="scrollable">
<text class="tab-text" for="{{tabsMenu}}">{{$item.cityName}}-{{$idx}}text>
class="tab-content" scrollable="{{scrollable}}">
class="item-container" for="{{tabsMenu}}">
<text>{{$item.cityPath}}text>
tabs>
export default {
data: {
componentName: 'tabs',
current_index: 0,
tabsMenu: [
{ cityName: "上海", cityPath: "shanghai" },
{ cityName: "北京", cityPath: "beijing" },
{ cityName: "郑州", cityPath: "zhengzhou" },
{ cityName: "南京", cityPath: "nanjing" },
{ cityName: "重庆", cityPath: "chongqing" },
{ cityName: "苏州", cityPath: "suzhou" },
{ cityName: "成都", cityPath: "chengdu" },
{ cityName: "深圳", cityPath: "shenzhen" },
],
tabIsLoadArr: []
},
changeTabactive(e) {
// 切换tab
this.current_index = e.index;
this.tabIsLoadArr[e.index] = true;
console.info('切换tab: ' + e.index, this.tabIsLoadArr)
},
}
</script>
/* 这是官网demo的基础css */
@import "../Common/css/common.css";
.tabs {
flex: 1;
margin-top: 20px;
margin-right: 30px;
margin-left: 30px;
background-color: #ffffff;
}
.tab-content {
flex: 1;
}
.tab-bar {
height: 100px;
border-color: #bbbbbb;
color: #bbbbbb;
border-bottom-width: 1px;
}
.tab-text {
text-align: center;
width: 200px;
}
.tab-text:active {
color: #f76160;
}
.item-container {
padding-top: 30px;
padding-left: 0px;
padding-right: 0px;
flex-direction: column;
}
.item-content {
flex-direction: column;
padding-bottom: 30px;
}
.item-title {
padding-top: 50px;
padding-bottom: 20px;
color: #aaaaaa;
}
.item-title-first {
padding-top: 0px;
}
.item-input {
height: 80px;
margin-right: 60px;
margin-left: 60px;
padding: 20px;
border-width: 1px;
border-color: #bbbbbb;
border-radius: 5px;
font-size: 30px;
}
.item-picker {
margin-right: 60px;
margin-left: 60px;
padding: 20px;
border-width: 1px;
border-color: #bbbbbb;
border-radius: 5px;
}
.item-slider {
padding: 20px;
}
.circular {
width: 40px;
height: 40px;
}
.list {
flex: 1;
}
.load-more {
justify-content: center;
align-items: center;
height: 100px;
}
.item {
height: 150px;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.item_color {
background-color: #f76160;
}
.switch-content {
flex-direction: row;
margin-left: 30px;
margin-right: 30px;
}
.item-content-title {
flex: 1;
padding-top: 20px;
padding-bottom: 20px;
}
.switch {
height: 50px;
width: 320px;
}
</style>
|
|