使用weex，开发美食app之vue页面实现

这里就带用weex大家做一个简单的app

数据接口来自 阿里云
https://market.aliyun.com/products/57126001/cmapi012028.html?spm=5176.8216963.738024.10.mtedXP#sku=yuncode602800005
首先实现页面，页面大致分为三个，

一个是展示所有分类的首页

一个是展示不同菜系以及菜谱

一个是婴儿食谱（因为自己有小孩，所以把它独立出来）

界面比较简陋


                     

 
                            


当然界面是自己瞎倒腾的，不会很美观

首先我们写一个项目是weex项目，那么就创建一个weex项目，在没有使用到native功能之前，我们只需要写weex 的前端代码，如果到写完之后都没有使用到native 的功能，那么我们就使用weex 的native来分别打好android 和ios 的包即可

这个我们使用weex init 创建项目

生成框架中，我们使用前面介绍的滑动的slide 实现首页的ui框架

weex slider 实现滑动底部导航功能

然而使用的时候需要注意一点

<slider style="flex:1;" @change="onchange" :index="page">
<div class="frame" :style="{height:`${totalheight}px`}" v-for="(item, index) in menulist">
<!-- 这里面放每一个菜单 '分类','列表','宝宝食谱' -->
<classes v-if="index === 0"></classes>
<listview v-if="index === 1"></listview>
<babyfoods v-if="index === 2"></babyfoods>
</div>
</slider>

里面需要   v-if="index === 1"     这样的代码控制显示，否则会出现，滑动的时候第二页依然展示的是第一页数据的情况

这个slider 实现完之后，第一个页面

我是左边放了一个list 右边放了一个 div  flex 满行的时候换行功能

第二个页面稍微复杂一些，是一个搜索框，一个菜单栏，一个list  菜单栏可以展开

第三个页面是左边一个list 右边一个 瀑布流，因为现在weex的瀑布流还有一些问题

weex 官方瀑布流

看这个例子我们也会发现确实写这个例子的哥们也是很坑爹，所有的控件的css 的px 单位没有写，导致页面在html 也无法显示

其次都修改好之后，可以发现，waterfall的宽度指定之后 显示就出问题了，只是一半看不到了，不管怎么修改cell的宽度都没有用，而后，我不小心打开了refresh，设置了refresh 的宽度，显示才显得比较合理，但是可以看到目前这个控件的坑还是略多有待完善

请求数据，参考weex 的
stream

这个接口需要自己增加一个header 参考文档

目前时间比较少，写的比较慢，预计周末之前把功能都写完之后会放到github，有兴趣的朋友可以先标记一下