weex 开发多个tab的列表页面

想上效果图：第一页，和第三页的数据

[图片上传中...(图片20180524115447447.png-3d787e-1527134271918-0)] 图片20180524115447447.png

主页面代码

<template>
    <div>
        <div class="demo">
            <!--状态栏-->
            <text class="statusbar"></text>
            <!--标题栏-->
            <wxc-minibar title="按单收货"
                         background-color="#2da45d"
                         text-color="#FFFFFF"
                         left-button='https://gw.alicdn.com/tfs/TB1cAYsbv2H8KJjy0FcXXaDlFXa-30-53.png'
                         right-text="扫描"
                         @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                         @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
        </div>
        <!--导航栏-->
        <wxc-tab-page ref="wxc-tab-page"
                      :tab-titles= "tabTitles"
                      :tab-styles= "tabStyles"
                      title-type="text"
                      :needSlider="needSlider"
                      :is-tab-view="isTabView"
                      :tab-page-height="tabPageHeight"
                      :spm-c="4307989"
                      @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
            <list class="item-container"
                  v-for="(v,index) in tabList"
                  :key="index">
                <cell class="cell"
                      v-for="(item,key) in v"
                      :key="key">
                    <!--<wxc-pan-item url="http://www.baidu.com/" @wxcPanItemPan="wxcPanItemPan">-->
                        <order-item class="item"
                                    :createTime="item.createDate"
                                    :workOrder="item.disSysOrder"
                                    :order="item.orderId"></order-item>
                        <!-- 下划线 -->
                        <text class="border-cell"></text>
                    <!--</wxc-pan-item>-->
                </cell>
            </list>
        </wxc-tab-page>
    </div>
</template>

<script>
import { WxcMinibar, WxcTabPage, Utils, BindEnv } from 'weex-ui'

import orderItem from './order-item.vue'

import Config from './config'

import Vue from 'vue'

var navigator = weex.requireModule('navigator')
const modal = weex.requireModule('modal')
var stream = weex.requireModule('stream')
const storage = weex.requireModule('storage')

export default {

  components: { WxcMinibar, WxcTabPage, Config, orderItem },

  data: function () {
    return {
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
      tabList: [],
      needSlider: true,
      demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      supportSlide: true,
      isTabView: true,
      tabPageHeight: 1334,
      orderList: [],
      createTime: '180009900',
      workorder: '99999999'
    }
  },
  created: function () {
    this.tabPageHeight = Utils.env.getPageHeight()
    // this.tabList = [...Array(this.tabTitles.length).keys()].map(i => [])
    // Vue.set(this.tabList, 0, this.demoList)

    modal.toast({'message': '初始化数据!', 'duration': 1})

    this.getOrderData(0)
  },
  methods: {
    getOrderData (curpage) {
      const self = this
      var flag = 1010
      switch (curpage) {
        case 0:// 待入库
          flag = 1010
          break
        case 1:// 部分入库
          flag = 1011
          break
        case 2:// 已入库
          flag = 1120
          break
        case 3:// 取消单据
          flag = 1014
          break
      }
      //这里url自己写就好
      var url = 'xxxx'
      console.log('geturl----' + url)

      stream.fetch({
        method: 'GET',
        url: url,
        type: 'json'
      }, function (response) {
        console.log(response)

        self.orderList = response.data.jsonData.object.inquiry

        // 刷新当前页面的数据 // tablist是对于tab的集合 需要v-for //orderlist是对应tab下的list数据的集合 需要v-for
        Vue.set(self.tabList, curpage, self.orderList)

        console.log(self.orderList.length)
      }, function (response) {
        console.log('http in progress')
      })
    },
    wxcTabPageCurrentTabSelected (e) {
      // const self = this
      const index = e.page

      modal.toast({ 'message': index, 'duration': 1 })

      // 接口调用
      this.getOrderData(index)
    },
    wxcPanItemPan (e) {
      if (BindEnv.supportsEBForAndroid()) {
        this.$refs['wxc-tab-page'].bindExp(e.element)
      }
    },
    minibarLeftButtonClick () {
      this.$router.push('-1')
    },
    minibarRightButtonClick () {
      modal.toast({ 'message': 'click rightButton!', 'duration': 1 })

      storage.setItem('title', '单据详情-1', event => {
        this.state = 'set success'
        console.log('set success')
      })

      // this.$router.push({ path: '/next'})

      navigator.push({
        url: 'http://192.168.42.183:8089/dist/src/tj/wareHouse/orderDetail.js',
        animated: 'true'
      }, event => {
        modal.toast({ message: 'callback: ' + event })
      })
    }
  }
}
</script>

<style scoped>
    .statusbar{
        background-color: #2da45d;
        height: 45px;
    }
    .container{
        flex-direction: column;
    }
    .item-container {
        width: 750px;
        background-color: #dddddd;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }

    .border-cell {
        background-color: #dddddd;
        width: 750px;
        height: 24px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }
</style>

经历的问题点说明：

1：接口返回数据的刷新

Vue.set(self.tabList, curpage, self.orderList)

// 刷新当前页面的数据
// tablist是对于tab的集合 需要v-for
//orderlist是对应tab下的list数据的集合 需要v-for

2：list的下划线，灰色的

<text class="border-cell"></text>

3: 第三方库 weex-ui

上面使用的WxcMinibar, WxcTabPage就是第三方库的

Weex Ui 半年开源之路

4: 封装组件

上面的<order-item/> 就是列表中的item, 写在order-item.vue, 通过import的方式调用，

import orderItem from './order-item.vue'

代码如下:

<template>
    <div class="item_whole">
        <div class="item_title">
        <text class="item_left_title">{{leftTitle}}</text>
        <text class="item_right_title">{{rightTitle}}</text>
        </div>
        <div class="item_content">
            <div class="item_text">
            <text class="item_name">{{"创建时间"}}</text>
                <text class="text_create_time" >{{createTime}}</text>
            </div>
            <div class="item_text">
                <text class="item_name">{{"作业单据"}}</text>
                <text class="text_create_time" >{{workOrder}}</text>
            </div>
            <div class="item_text">
                <text class="item_name">{{"订单"}}</text>
                <text class="text_order" >{{order}}</text>
            </div>
        </div>
    </div>
</template>

<script>
import { WxcRichText, WxcSpecialRichText } from 'weex-ui'

export default {
  name: 'order-item',
  components: { WxcRichText, WxcSpecialRichText },
  props: {
    leftTitle: {
      type: String,
      default: '单据信息'
    },
    rightTitle: {
      type: String,
      default: '调拨入库'
    },
    createTime: {
      type: String,
      default: '100'
    },
    workOrder: {
      type: String,
      default: '1000'
    },
    order: {
      type: String,
      default: '1000'
    }
  },
  data: function () {
    return {
    }
  }

}
</script>

<style scoped>
    .item_whole{
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        color: #afddff;
    }
    .item_title{
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .item_left_title{
        font-size: 32px;
        color: #000000;
    }
    .item_right_title{
        font-size: 32px;
        color: #F2A12F;
    }
    .item_content{
        flex-direction: column;
    }
    .item_text{
        flex-direction: row;
        font-size: 28px;
        color: #333333;
        margin-top: 20px;
    }
    .text_create_time{
        margin-left: 100px;
        font-size: 28px;
        color: #333333;
    }
    .text_order{
        margin-left: 165px;
        font-size: 28px;
        color: #333333;
    }

</style>

props 中写的就是自定义的控件的属性

5： 页面的跳转

方式一：weex 内置navigator 实现

navigator.push({
        url: 'http://192.168.42.183:8089/dist/src/tj/wareHouse/orderDetail.js',
        animated: 'true'
      }, event => {
        modal.toast({ message: 'callback: ' + event })
      })

方式二: vue-router路由方式实现
weex 开发中vue-router路由实现页面跳转

该方式跳转有点生硬，不如方式一。

6: 数据传递

方式一：通过storage

//存储
storage.setItem('title', '单据详情-1', event => {
        this.state = 'set success'
        console.log('set success')
      })
//获取
storage.getItem('title', event => {
      this.title = 'value: ' + event.data
      modal.toast({'message': '收到' + this.title, 'duration': 1})
    })