点击空白处退出提示
项目名称:微信购物小程序
我要开发同款作品详情
项目简述:优品购物,电商小程序,大致分为,首页,商品分类,购物车,我的,为主。
责任:参与负责前端界面,功能,与后端交互的处理
问题处理:
前后交互,失败提示,加载loading效果
根据后端的数据,判断失败,封装一个全局的消息提示框,进行失败提示。采用@escook/request-miniprogram包,配置拦截器展示loading,以及请求前缀,减少代码。
减少维护,自变化适应,分类页面,滚动栏,上的处理
左侧分类栏,在加载生命周期,父级scroll-view的高度,使用getSystemInfoSync,实现不同设备的自适应,子级block,多加一个类active的动态绑定,三元加标识符判断是否添加,
添加点击事件,改变标识符决定是否添加active,修改右侧商品展示栏的scroll-top实现滚动,
并且向后端发送请求,更换右侧商品展示栏内容,css不用死值height,用line-height,多加一个类的绑定,再用后端的数据,进行for渲染,设置key,但不使用下标。这样就可以做到,以后想添加分类商品,或者修改,只用修改后端数据,前端自动变化的分类页面,减少维护。
搜索页面,上的处理
搜索栏,采用uniapp提供的uni-search-bar,绑定输入事件,采取节流的思路,设置标识符timer初始值为null,每一次执行前,先停止上一个timer,,然后设置timer的500毫秒只执行一次,获取值,然后再判断,没有,对历史数据设为空数组,有,调用获取展示的函数,后端会传对应搜索结果,前端页面会根据,v-if搜索结果数组长度是否为零,判断是否继续展示搜索历史,获取展示的函数,调用存历史记录的函数,采用ES6,Set去重,添加,再from转换,然后异步,setStorageSync存本地数据,历史数组放到computed调用数组转向,保证每次加入的数据,排在前面。
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论