apiCloud + aui实现tab栏切换功能

本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架。同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能在同一页面中使用。
aui框架链接
sui框架链接
以下就是利用apiCloud + aui实现的一个tab栏切换功能。效果如下:
在这里插入图片描述

css部分

 <link rel="stylesheet" href="../css/aui.css">
  <style type="text/css">
  /* 列表样式 */
.aui-list-item{
  background-color: #fff;
  display: flex;
  align-items:center;
  padding:0.5rem 0.5rem

}
.aui-list-item-inner.aui-list-item-arrow {
     padding-right: 0rem !important; 
}
.aui-list-item-media{
  height: 2.2rem;
  width: 2.2rem;
  border: 0.05rem solid #333333;
  margin-right:0.3rem 
}
.aui-list-item-text{
  display: flex;
}
.listTime{
  width: 5rem !important;
  font-size:0.6rem 
}
.schedule{
  width: 13rem !important;
}
  </style>

body部分

<body>
<!-- 导航栏 -->
<header class="aui-bar aui-bar-nav aui-bar-light">
  <a class="aui-pull-left aui-btn">
    <span class="aui-iconfont "></span>
  </a>
  <div class="aui-title">Tab切换</div>
</header>
 <!-- tab切换栏部分 -->
 <div class="aui-tab" id="tab">
  <div class="aui-tab-item aui-active" id="tab1">列表1</div>
  <div class="aui-tab-item" id="tab2">列表2</div>
</div>
<!-- tab切换内容部分 -->
  <div id="jhdata" v-cloak>
    <!-- 卡片 -->
    <div class="list-block media-list">
      <ul>
          <li class="aui-list-item aui-list-item-middle" v-for='(item,key) in buyList' :key='key'>
              <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media">
                      <img :src=item.avatar style='width: 2.2rem;'></div>
                  </div>
                  <div class="aui-list-item-inner aui-list-item-arrow">
                      <div class="aui-list-item-text">
                          <div class="item-title">{{item.nickname}}</div>
                      </div>
                      <div class="aui-list-item-text">
                          <p class="listTime sum">糖果:{{item.num}}</p>
                          <p class="listTime schedule">创建时间:{{item.createtime}}</p>
                      </div>
                  </div>
              </div>
          </li>
        <!-- <li v-for='(item,key) in buyList' :key='key' @click='buyingList(item.id)'>
          <div class="item-content">
            <div class="item-media">
              <img :src=item.avatar style='width: 2.2rem;'></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">{{item.nickname}}</div>
              </div>
              <div class="item-subtitle">
                <p class="listTime sum">糖果:{{item.num}}</p>
                <p class="listTime schedule">创建时间:{{item.createtime}}</p>
              </div>
            </div>
          </div>
        </li> -->
      </ul>
    </div>
  </div>
</body>

script部分
http.js是我封装的接口文件,可以不用引,要实现tab切换功能,必须引入aui-tab.js文件,具体请翻阅aui官网。

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/http.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript">
  var vm
  apiready = function () {
    var tab = new auiTab({
      element: document.getElementById("tab"),
      index: 1,
      repeatClick: false
    }, function (ret) {
      if (ret.index == 1) {
        vm.type = 1
        vm.send()
        indexId = 1
      } else {
        vm.type = 2
        vm.send()
        vm.buyList = []
        indexId = 2
      }
    });
    vue()    
  }
  function vue() {
    vm = new Vue({
      el: '#jhdata',
      data: {
        type: 1,//接口里所需参数
        page: 1,
        buyList: [], //买卖单列表 
      },
      methods: {
        send: function () {
          var _this = this
          //  alert(_this.type)
          Http.post({
            api: Http.API_URL.CANDYTRANSACTIONLIST,
            data: {
              type: _this.type,
              page: _this.page
            },
            success: function (ret) {
              // alert(JSON.stringify(ret))
              if (ret.code == 1) {
                if (ret.data.list.length == 0) {
                  api.toast({
                    msg: '没有更多数据了',
                    duration: 2000,
                    location: 'bottom'
                  });
                } else {
                  var list = ret.data.list

                  _this.buyList = _this.buyList.concat(list)

                }
              }
            }
          })
        },
      },
      mounted: function () {
        this.send()
      },
    })
  }
 
</script>

有一个重要的点是,导航栏和tab切换栏必须写在vue实例化所选中的div的外面(el: ‘#jhdata’,),里面只允许写所切换的内容,我也不知道这是为什么,大家可以再试一试,欢迎讨论。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值