gankQuick-快应用(妹子篇)
感谢 gank.io 提供的 api
大家好。上一篇文章我们做了个妹子的页面(传送门)
今天接着上一次的文章,继续往下做:
1、先来做个 tabs 吧
-
1、修改 Home 文件夹为 MeiZi
-
2、新建 Home 文件夹,里面新建一个 index.ux 文件
-
3、开始编码
Home/index.ux
<import name="meizi" src="../Meizi/index"></import>
<template>
<div id="home">
<div class="flexible-tabs">
<tabs onchange="changeTabactive" index="{{currentIndex}}">
<tab-content class="flexible-tab-content">
<div class="tab-content-section">
<meizi if="currentIndex===0"></meizi>
</div>
<div class="tab-content-section">
<text if="currentIndex===1">其他<text>
</div>
<div class="tab-content-section">
<text if="currentIndex===2">about me<text>
</div>
</tab-content>
</tabs>
<div class="flexible-tabbar">
<div class="tab-item" for="{{tabList}}" @click="clickTabBar($idx)">
<text class="{{currentIndex === $idx ? 'active' : 'tab-text'}}">{{$item.name}}</text>
</div>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
#home {
font-size: 16px;
.flexible-tabs {
display: flex;
flex-direction: column;
}
.flexible-tabbar {
display: flex;
border-top-width: 1px;
border-top-color: #eeeeee;
.tab-item {
display: flex;
padding: 20px;
font-size: 12px;
justify-content: center;
flex: 1;
}
.tab-text {
color: #aaaaaa;
font-size: 24px;
}
.active {
font-size: 24px;
color: #24b9ff;
}
}
}
</style>
<script>
export default {
data: {
currentIndex: 0,
tabList: [
{
name: '妹子',
icon: ''
},
{
name: '其他',
icon: ''
},
{
name: 'Me',
icon: ''
}
]
},
// 监听change事件,触发时动态修改tabs的index属性
// 左右滑动屏幕的时候就会需要用到这里
changeTabactive(evt) {
this.currentIndex = evt.index
},
//点击tab的时候,记录当前选中tab的下标
clickTabBar(index) {
this.currentIndex = index
}
}
</script>
tabs 搞定, 这里有 changeTabactive 和 clickTabBar 两个函数,不只是为记录下标,好做样式和页面切换。
还有一个作用是下面这段代码中,在 if 里用作判断。 这样也是一种懒加载的方式
<div class="tab-content-section">
<meizi if="currentIndex===0"></meizi>
</div>
<div class="tab-content-section">
<text if="currentIndex===1">其他<text>
</div>
<div class="tab-content-section">
<text if="currentIndex===2">about me<text>
</div>
这里是 flex 布局。说实话,有点不太适应。
但是,用好了,真的很爽。
这里解释一下布局吧。会的大佬可以跳过...
因为之前也很少有道 flex 做整体的布局,所以今天我也记录一下。
对 flex 不懂的,看阮一峰大佬的这篇教程,真的是包教包会
.flexible-tabs {
display: flex;
flex-direction: column;
}
这里的意思是:纵向从上往下排列.
我们的 DOM 结构是这样的:
<div class="flexible-tabs">
<tabs></tabs>
<div></div>
</div>
这句样式 flex-direction: column
会让里面的 tabs
和 div
垂直排列
其实,快应用的 dispaly 默认值就是 flex,所以,其实可以这么写
.flexible-tabs {
flex-direction: column;
}
效果是一样的,我写上只是为了方便阅读,你们可以不写的。
上面写完,效果是这样的 ↓
现在我们去完善一下会 Meizi 页面。
Meizi/index.ux
<template>
<div id="Meizi">
<refresh @refresh="refreshList" refreshing="{{isRefreshing}}">
<list class="list" @scrollbottom="loadMore">
<block for="{{meiziInfo.list}}">
<list-item type="imgItem" class="img-item">
<image @click="shouModel($item.url)" class="img" src="{{$item.url}}" />
</list-item>
</block>
<list-item type="loadMore" class="load-more">
<progress type="circular"></progress>
<text>{{meiziInfo.hasMore?'加载更多':'已经没有更多妹子啦~'}}</text>
</list-item>
</list>
</refresh>
<stack show="{{model.show}}" class="mask" @click="closeModel">
<image class="big-img" src="{{model.url}}" />
</stack>
</div>
</template>
<style lang="less" scoped>
#Meizi {
font-size: 16px;
padding: 20px 0;
.list {
columns: 2;
}
.img-item {
margin: 0 10px 20px;
height: 400px;
}
.img {
width: 100%;
height: 100%;
}
.load-more {
display: flex;
justify-content: center;
padding-top: 20px;
}
.mask {
position: fixed;
height: 100%;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
.big-img {
width: 100%;
}
}
}
</style>
<script>
export default {
data: {
pageSize: 10,
page: 1,
isRefreshing: false,
// 妹子列表
meiziInfo: {
list: [],
hasMore: true
},
// 显示model
model: {
show: false,
url: ''
}
},
refreshList(evt) {
this.isRefreshing = evt.refreshing
this.getMeiziList()
},
getMeiziList() {
this.$app.$def.fetch.fetch({
url: `http://gank.io/api/data/福利/${this.pageSize}/${this.page}`,
success: data => {
if (this.isRefreshing) {
this.$app.$def.prompt.showToast({
message: '刷新成功'
})
this.isRefreshing = false
}
const results = JSON.parse(data.data).results
if (results.length <= 0) {
this.meiziInfo.hasMore = false
} else {
this.meiziInfo.list.push(...results)
}
},
fail: (error, code) => {
console.log('handling fail, error=' + error)
console.log('handling fail, code=' + code)
}
})
},
shouModel(url) {
this.model = {
show: true,
url
}
},
closeModel() {
this.model = {
show: false,
url: ''
}
},
loadMore() {
this.page++
this.getMeiziList()
},
onInit() {
this.$page.setTitleBar({ text: '妹子妹子~~' })
this.getMeiziList()
},
}
</script>
增加了 refresh 组件,做下拉刷新操作。增加了一个 stack 组件,做查看大图操作。
效果图:
好今天先到这.完整项目地址在 这里
可以点一下 start,感恩的 ❤️
下期精彩预告:
- list
- web
相关文章:快应用之手摸手,跟我走(1)