本人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’,),里面只允许写所切换的内容,我也不知道这是为什么,大家可以再试一试,欢迎讨论。