代码片段：
<div class="flex-vertical" id="rootWarp" v-cloak>
<!-- 头部 -->
<header id="header">
<div class="header" :class="{on:headers.num==0}" v-for="(headers,index) in header">
<div class="title">{{headers.name}}</div>
<div class="right" @click="fnAddFriends();" v-if="headers.name==‘通讯录‘"></div>
</div>
</header>
<!-- sectionflex-con -->
<section class="flex-con"></section>
<!-- 底部 -->
<footer id="footer" class="flex-wrap">
<div class="bar-tab-item flex-con" :class="{active:footers.num==0}" v-for="(footers,index) in footer" @click="fnChange(index);">
<!-- 聊天列表消息数 -->
<div class="badge" v-show="footers.name==‘消息‘ && footers.number>0">{{footers.number}}</div>
<!-- 通讯录加好友的新消息提示 -->
<div class="dot" v-if="footers.id==1 && footers.newNews==true"></div>
<i class="icon" :class="fnAddcs(footers.id)"></i>
<div class="bar-tab-label">{{footers.name}}</div>
</div>
</footer>
</div>
复制代码
首先api使用需要在vue渲染之后生效，所以初始化一下vue
apiready = function() {
//初始化vue
fnInitVue();
};
复制代码
// 设置底部点击初始化0防止多次重复点击
var eliminate = 0;
function fnInitVue() {
window.rootVue = new Vue({
el: ‘#rootWarp‘,
data: {
header: [],
footer: []
},
mounted: function() {
this.$nextTick(function() {
fnRequest();
fnInit();
});
},
methods: {
//打开添加好友页面
fnAddFriends: function() {
},
// 底部图标状态
fnAddcs: function(id) {
if (id == 0) {
return "message"; //消息图标
}
if (id == 1) {
return "directories"; //通讯录图标
}
if (id == 2) {
return "setup"; //设置图标
}
},
//底部tab
fnChange: function(index) {
// 防止重复点击
if (index == eliminate) {
return;
}
eliminate = index;
// 改变头部显示
this.header[index].num = 0;
// 改变底部显示
this.footer[index].num = 0;
//改变页面
api.setFrameGroupIndex({
name: ‘main_group‘,
index: index
});
}
}
})
}
复制代码
设置页面代码片段：
模拟ios滑动开关css：
.list-item .right {
position: relative;
z-index: 33;
}
.list-item .right .state {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 38px;
height: 21px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
}
.list-item .right .open {
}
.list-item .right .open::after {
content: " ";
float: right;
margin-top: 1px;
margin-right: 1px;
width: 19px;
height: 19px;
border-radius: 50%;
box-shadow: 0px 0px 1px 1px #d4d4d4;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.list-item .right .close {
}
.list-item .right .close::after {
content: " ";
float: left;
margin-top: 1px;
margin-left: 1px;
width: 19px;
height: 19px;
border-radius: 50%;
box-shadow: 0px 0px 1px 1px #d4d4d4;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
复制代码
div：
<div id="rootlist" class="list" v-cloak>
<transition v-for="(lists,index) in list">
<div class="list-item flex-wrap" @click="fnOpenWin(list.id,list.name);" v-if="list.id==0||list.id==1">
<div class="left">{{lists.name}}</div>
<div class="title flex-con"></div>
<div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
<div class="state" :class="fnBarType(lists.state)"></div>
</div>
</div>
<div class="list-item flex-wrap" v-else>
<div class="left">{{lists.name}}</div>
<div class="title flex-con"></div>
<div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
<div class="state" :class="fnBarType(lists.state)"></div>
</div>
</div>
</transition>
<div class="list-footer" v-if="list.length>0">
<div class="btn" @click="fnSignOut();">退出登录（<span>{{user}}</span>）</div>
</div>
</div>
复制代码
js：
apiready = function() {
fnInitVue();
};
function fnInitVue() {
window.rootVue = new Vue({
el: ‘#rootlist‘,
data: {
list: [],
user: ‘‘,
},
mounted: function() {
this.$nextTick(function() {
fnInit();
fnRequest();
});
},
methods: {
// 开关状态
fnSwitch: function(index) {
if (this.list[index].state) {
this.list[index].state = false;
} else {
this.list[index].state = true;
}
},
// 根据true false显示不同按钮状态
fnBarType: function(type) {
if (type == true) return ‘open‘;
if (type == false) return ‘close‘;
},
// 退出登录
fnSignOut: function() {
}
}
})
}
复制代码
原文地址：https://www.cnblogs.com/tuituile/p/11757580.html