uni-app实战写法

Posted 2020-11-27 昵称太难取了

接口的封装，在手机截图截得有封装的代码单独一个文件，封装完

在min.js文件引入，挂载到vue全局实例上，

直接this.xxx()

 

 

在组件页面里发请求，手机截图有获取数据，渲染数据

 在meoths里定义方法发请求保存数据，在onload函数里调用方法

 

在横向四个平均小导航模块里

先用弹性盒写出静态布局，然后定义出来一个数组数据

来循环出所有的导航，给每一个导航提供一个点击时间，

传一个url路径参数，通过编程试导航跳转页面

 

商品列表两列展示，写出来一个商品结构，使用弹性盒布局，然后渲染商品数据就行了

 

上拉加载触发函数onReachBottom()，手机有截图在请求商品的时候，this.data=[...this.data,res..data.lisi]

 

在上拉加载触发函数里

先判断获取的商品lenges是否等于返回的总数，如果等于就return  this.底线盒子=true,不在请求，并且让有底线盒子显示

让pageindex++

然后调用请求商品接口的方法，

 

封装请求，也支持anync，waeit

url.request({url:"xxxx"})

 

uni滚动组件scroll-view

<scroll-view>

   <view>

   </view>

</scroll-view>

被该标签包裹的内容会有滚动效果，有控制属性，来设置横向，或者纵向效果。里边的li需要设宽度，高度也要设，高度可设成百分百。

一进来就渲染第一条的话，在onload函数里调用请求一级导航方法，在方法里，调用每一个导航绑定的事件，传入0，和第一个导航的id

每一个导航点击高亮，根据接口返回的导航数组，循环渲染导航，设初始数据等于0 然后通过点击事件数组索引动态加类名

做第二件事，渲染右侧对应的数据，需要传入第二个id参数，拿到参数，调用接口，获取右侧数据，渲染数据