想上效果图：第一页，和第三页的数据
[图片上传中...(图片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就是第三方库的
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