快應用之手摸手，跟我走（2）

HT發表於2018-03-30

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;
}
複製程式碼

這裡的意思是：縱向從上往下排列.

快應用之手摸手，跟我走（2）

我們的 DOM 結構是這樣的：

<div class="flexible-tabs">
  <tabs></tabs>
  <div></div>
</div>
複製程式碼

這句樣式 flex-direction: column 會讓裡面的 tabs 和 div 垂直排列

其實，快應用的 dispaly 預設值就是 flex，所以，其實可以這麼寫

.flexible-tabs {
  flex-direction: column;
}
複製程式碼

效果是一樣的，我寫上只是為了方便閱讀，你們可以不寫的。

上面寫完，效果是這樣的 ↓

快應用之手摸手，跟我走（2）

現在我們去完善一下會 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 元件，做檢視大圖操作。

效果圖：

快應用之手摸手，跟我走（2）

好今天先到這.完整專案地址在 這裡

可以點一下 start，感恩的 ❤️

下期精彩預告：

  • list
  • web

相關文章：快應用之手摸手，跟我走（1）

相關文章