apiCloud + aui实现tab栏切换功能

最新推荐文章于 2022-10-24 09:56:06 发布

韩知虹

最新推荐文章于 2022-10-24 09:56:06 发布

阅读量2.8k

点赞数

分类专栏： apiCloud 文章标签： apiCloud aui apiCloud实现tab切换 tab切换

本文链接：https://blog.csdn.net/weixin_44709394/article/details/101096558

版权

apiCloud 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本人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
评论
apiCloud + aui实现tab栏切换功能

本人apiCloud新手一枚，在学习的过程中，发现aui是一个非常好用的ui框架，我在作apiCloud项目时，最常用的就是aui框架。同时，发现sui也挺好，这两种框架可以同时在项目中混用，但是不能在同一页面中使用。aui框架链接sui框架链接以下就是利用apiCloud + aui实现的一个tab栏切换功能。css部分 <link rel="stylesheet" href="...
复制链接

扫一扫