apicloud apicloud

注册
查看: 4933|回复: 14

[案例源码] (二)环信 easeChat模块demo底部导航切换、设置、退出功能

主题:
41
帖子:
9320
云币:
12694

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

[案例源码] (二)环信 easeChat模块demo底部导航切换、设置、退出功能

4933 14 | 发表于 2018-11-16 14:50:30 |阅读模式 | |
本帖最后由 Mr.ZhouHeng 于 2019-9-3 15:26 编辑

环信 easeChat模块demo(vue+api实现底部导航跟设置列表)环信退出功能



代码片段:
  1.   <div class="flex-vertical" id="rootWarp" v-cloak>
  2.         <!--  头部 -->
  3.         <header id="header">
  4.             <div class="header" :class="{on:headers.num==0}" v-for="(headers,index) in header">
  5.                 <div class="title">{{headers.name}}</div>
  6.                 <div class="right" @click="fnAddFriends();" v-if="headers.name=='通讯录'"></div>
  7.             </div>
  8.         </header>
  9.         <!--  sectionflex-con -->
  10.         <section class="flex-con"></section>
  11.         <!--  底部 -->
  12.         <footer id="footer" class="flex-wrap">
  13.             <div class="bar-tab-item flex-con" :class="{active:footers.num==0}" v-for="(footers,index) in footer" @click="fnChange(index);">
  14.                 <!-- 聊天列表消息数 -->
  15.                 <div class="badge" v-show="footers.name=='消息' && footers.number>0">{{footers.number}}</div>
  16.                 <!-- 通讯录加好友的新消息提示 -->
  17.                 <div class="dot" v-if="footers.id==1 && footers.newNews==true"></div>
  18.                 <i class="icon" :class="fnAddcs(footers.id)"></i>
  19.                 <div class="bar-tab-label">{{footers.name}}</div>
  20.             </div>
  21.         </footer>
  22.     </div>
复制代码


首先api使用需要在vue渲染之后生效,所以初始化一下vue
  1. apiready = function() {
  2.         //初始化vue
  3.         fnInitVue();
  4.     };
复制代码
  1.   //  设置底部点击初始化0防止多次重复点击
  2.     var eliminate = 0;

  3.     function fnInitVue() {
  4.         window.rootVue = new Vue({
  5.             el: '#rootWarp',
  6.             data: {
  7.                 header: [],
  8.                 footer: []
  9.             },
  10.             mounted: function() {
  11.                 this.$nextTick(function() {
  12.                     fnRequest();
  13.                     fnInit();
  14.                 });
  15.             },
  16.             methods: {
  17.                 //打开添加好友页面
  18.                 fnAddFriends: function() {

  19.                 },
  20.                 // 底部图标状态
  21.                 fnAddcs: function(id) {
  22.                     if (id == 0) {
  23.                         return "message"; //消息图标
  24.                     }
  25.                     if (id == 1) {
  26.                         return "directories"; //通讯录图标
  27.                     }
  28.                     if (id == 2) {
  29.                         return "setup"; //设置图标
  30.                     }
  31.                 },
  32.                 //底部tab
  33.                 fnChange: function(index) {
  34.                     // 防止重复点击
  35.                     if (index == eliminate) {
  36.                         return;
  37.                     }
  38.                     eliminate = index;
  39.                     // 改变头部显示
  40.                     this.header[index].num = 0;
  41.                     // 改变底部显示
  42.                     this.footer[index].num = 0;
  43.                     //改变页面
  44.                     api.setFrameGroupIndex({
  45.                         name: 'main_group',
  46.                         index: index
  47.                     });
  48.                 }
  49.             }
  50.         })
  51.     }
复制代码






设置页面代码片段:

模拟ios滑动开关css:
  1.   .list-item .right {
  2.             position: relative;
  3.             z-index: 33;
  4.         }

  5.         .list-item .right .state {
  6.             display: inline-block;
  7.             vertical-align: middle;
  8.             border-radius: 20px;
  9.             width: 38px;
  10.             height: 21px;
  11.             text-align: center;
  12.             line-height: 20px;
  13.             font-size: 12px;
  14.             color: #fff;
  15.         }

  16.         .list-item .right .open {
  17.             background-color: #00acff;
  18.         }

  19.         .list-item .right .open::after {
  20.             content: " ";
  21.             float: right;
  22.             margin-top: 1px;
  23.             margin-right: 1px;
  24.             width: 19px;
  25.             height: 19px;
  26.             border-radius: 50%;
  27.             background-color: #fff;
  28.             box-shadow: 0px 0px 1px 1px #d4d4d4;
  29.             -webkit-transition: all 0.2s linear;
  30.             transition: all 0.2s linear;
  31.         }

  32.         .list-item .right .close {
  33.             background-color: #ededed;
  34.         }

  35.         .list-item .right .close::after {
  36.             content: " ";
  37.             float: left;
  38.             margin-top: 1px;
  39.             margin-left: 1px;
  40.             width: 19px;
  41.             height: 19px;
  42.             border-radius: 50%;
  43.             background-color: #fff;
  44.             box-shadow: 0px 0px 1px 1px #d4d4d4;
  45.             -webkit-transition: all 0.2s linear;
  46.             transition: all 0.2s linear;
  47.         }
复制代码


div:
  1.   <div id="rootlist" class="list" v-cloak>
  2.         <transition v-for="(lists,index) in list">
  3.             <div class="list-item flex-wrap" @click="fnOpenWin(list.id,list.name);" v-if="list.id==0||list.id==1">
  4.                 <div class="left">{{lists.name}}</div>
  5.                 <div class="title flex-con"></div>
  6.                 <div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
  7.                     <div class="state" :class="fnBarType(lists.state)"></div>
  8.                 </div>
  9.             </div>
  10.             <div class="list-item flex-wrap" v-else>
  11.                 <div class="left">{{lists.name}}</div>
  12.                 <div class="title flex-con"></div>
  13.                 <div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
  14.                     <div class="state" :class="fnBarType(lists.state)"></div>
  15.                 </div>
  16.             </div>
  17.         </transition>
  18.         <div class="list-footer" v-if="list.length>0">
  19.             <div class="btn" @click="fnSignOut();">退出登录(<span>{{user}}</span>)</div>
  20.         </div>
  21.     </div>
复制代码

js:

  1.   apiready = function() {
  2.         fnInitVue();
  3.     };

  4.     function fnInitVue() {
  5.         window.rootVue = new Vue({
  6.             el: '#rootlist',
  7.             data: {
  8.                 list: [],
  9.                 user: '',
  10.             },
  11.             mounted: function() {
  12.                 this.$nextTick(function() {
  13.                     fnInit();
  14.                     fnRequest();
  15.                 });
  16.             },
  17.             methods: {
  18.                 // 开关状态
  19.                 fnSwitch: function(index) {
  20.                     if (this.list[index].state) {
  21.                         this.list[index].state = false;
  22.                     } else {
  23.                         this.list[index].state = true;
  24.                     }
  25.                 },
  26.                 // 根据true false显示不同按钮状态
  27.                 fnBarType: function(type) {
  28.                     if (type == true) return 'open';
  29.                     if (type == false) return 'close';
  30.                 },
  31.                 // 退出登录
  32.                 fnSignOut: function() {
  33.                   
  34.                 }
  35.             }
  36.         })
  37.     }
复制代码








本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
41
帖子:
9320
云币:
12694

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2018-11-16 17:51:48 |
本帖最后由 Mr.ZhouHeng 于 2018-11-20 20:51 编辑

消灭0回复下载这个帖子源码需要下载第一个的源码才能一起源码会随着更新帖子,更新在最新贴
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

转正司机

UID:134779

主题:
27
帖子:
196
云币:
619
发表于 2018-11-16 22:49:08 来自手机 |
感谢分享

驾校小白

UID:726949

主题:
0
帖子:
20
云币:
1
发表于 2018-11-19 11:24:55 |
乐呵乐呵

主题:
0
帖子:
9
云币:
0
发表于 2018-12-16 21:36:57 |
乐呵乐呵

驾校小白

UID:746174

主题:
0
帖子:
4
云币:
0
发表于 2019-2-19 14:14:41 |
感谢分享

驾校小白

UID:634165

主题:
2
帖子:
32
云币:
16
发表于 2019-2-26 14:31:35 |
谢谢分享 学习中

主题:
0
帖子:
26
云币:
24
发表于 2019-4-14 09:15:49 |
感谢分享

驾校小白

UID:643443

主题:
0
帖子:
4
云币:
2
发表于 2019-6-18 17:09:16 |

驾校小白

UID:643443

主题:
0
帖子:
4
云币:
2
发表于 2019-6-18 17:09:36 |

谢谢分享 学习中
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表