手记

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/xx/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/xx/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})
    })



作者:吃不饱的水手
链接:https://www.jianshu.com/p/00bbac5ac8fd


0人推荐
随时随地看视频
慕课网APP