使用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，有兴趣的朋友可以先标记一下