GankQuick – Quick Application

Quick application of official documents

Thanks to gank. IO for the API

Hello, everyone Last post we made a girl page (portal)

Today, we continue with the last article:

1. Let’s start with a Tabs

  • 1. Change the Home folder to MeiZi

  • 2. Create a Home folder and create an index.ux file

  • 3. Start coding

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"> other <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: 'sister',
        icon: ' '
      },
      {
        name: 'other',
        icon: ' '
      },
      {
        name: 'Me',
        icon: ' '}]}, // listen for the change event, ChangeTabactive (evt) {this.currentIndex = evt.index}, // When clicking TAB, ClickTabBar (index) {this.currentIndex = index}} </script>Copy the code

Tabs are done. There are two functions here, changeTabactive and clickTabBar, which are not just for recording subscripts for style and page switching.

The other thing is that in the code below, it’s used as a judgment in if. This is also a lazy way to load

<div class="tab-content-section">
  <meizi if="currentIndex===0"></meizi>
</div>
<div class="tab-content-section">
  <text if="currentIndex===1"> other <text> </div> <div class="tab-content-section">
  <text if="currentIndex===2">about me<text>
</div>
Copy the code

Here is the Flex layout. A little uncomfortable, to be honest.

But, when it’s done, it’s really good.

Let’s explain the layout here. Those who do can skip…

Since there have been few Flex layouts before, I’m going to record them today.

For those who do not understand Flex, look at ruan Yifeng’s tutorial, it is really a package

.flexible-tabs {
  display: flex;
  flex-direction: column;
}
Copy the code

This means: vertically arranged from top to bottom.

Our DOM structure looks like this:

<div class="flexible-tabs">
  <tabs></tabs>
  <div></div>
</div>
Copy the code

Flex – Direction: Column will align the tabs and div vertically

In fact, the default dispaly for quick apps is Flex, so you can actually write it this way

.flexible-tabs {
  flex-direction: column;
}
Copy the code

It’s going to be the same thing, but I’m just going to write it down for ease of reading, but you don’t have to write it down.

Finish writing above, the effect is such ↓

Now let’s go improve the Meizi page.

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?'Load more':'There are no more girls.'}}</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: rgba(0, 0, 0, 0.5); height: 100%; .big-img { width: 100%; } } } </style> <script>export default {
  data: {
    pageSize: 10,
    page: 1,
    isRefreshing: false{list: [], hasMore:true}, // show 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/ welfare /${this.pageSize}/${this.page}`,
      success: data => {
        if (this.isRefreshing) {
          this.$app.$def.prompt.showToast({
            message: 'Refresh successful'
          })
          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: 'Girl girl ~~' })
    this.getMeiziList()
  },
}
</script>
Copy the code

Add refresh component, do pull down refresh operation. Added a stack component to view the big picture operation.

Effect:

Ok, let’s stop here today. The full project address is here

You can click start, grateful ❤️

Highlights of the next episode:

  • list
  • web

Related articles: Quick Application hand touch hand, follow me (1)