04 uniapp/微信小程序 项目day04( 二 )


文章插图

04 uniapp/微信小程序 项目day04

文章插图
没有传值默认为false
04 uniapp/微信小程序 项目day04

文章插图
动态绑定checked
04 uniapp/微信小程序 项目day04

文章插图
2.3 修改勾选状态这里的思路是这样的先给组件来一个自定义事件
04 uniapp/微信小程序 项目day04

文章插图
回顾一下vue的自定义事件的参数e是对面传过来的参数 , 只有原生事件才是事件对象
04 uniapp/微信小程序 项目day04

文章插图
然后组件这边真正的change事件
04 uniapp/微信小程序 项目day04

文章插图
将id和状态传过来
04 uniapp/微信小程序 项目day04

文章插图
传过来之后应该修改state状态,但是要在vuex里面修改,为什么,因为我们的这些数据数组都是从里面拿过来的所以要在源头上修改
04 uniapp/微信小程序 项目day04

文章插图
找到后将其取反
04 uniapp/微信小程序 项目day04

文章插图
将参数传进来即可
04 uniapp/微信小程序 项目day04

文章插图
2.4 numberBox这个是uni的一个组件,展示加减数量的
使用这个组件,固定最少为1,并把默认值改为我们添加购物车的数量
04 uniapp/微信小程序 项目day04

文章插图
然后就是让他在特定区域才显示
04 uniapp/微信小程序 项目day04

文章插图
2.5 num-change我们的numberBox虽然可以加减变化 , 但是我们的父页面并没有检测到变化,所以购物车badge也没有对应的更新
需要改造一下这个事件
他有一个change事件 , 参数就是当前改变的值
04 uniapp/微信小程序 项目day04

文章插图

04 uniapp/微信小程序 项目day04

文章插图
这边接受数据,并传到vuex进行修改
04 uniapp/微信小程序 项目day04

文章插图
2.6 左滑删除用到uni的一个组件
uni-swipe-action
改造之前的代码
04 uniapp/微信小程序 项目day04

文章插图
记得options需要在data中来定义
04 uniapp/微信小程序 项目day04

文章插图
给她来一个点击事件
04 uniapp/微信小程序 项目day04

文章插图
点击删除就这一项筛选出去
04 uniapp/微信小程序 项目day04

文章插图
2.7 收货地址2.7.1 封装my-adress【04 uniapp/微信小程序 项目day04】
04 uniapp/微信小程序 项目day04

文章插图
父组件展示出来
04 uniapp/微信小程序 项目day04

文章插图
定义好下面边界线 , 和点击新增地址区域
04 uniapp/微信小程序 项目day04

文章插图

04 uniapp/微信小程序 项目day04

文章插图
然后是我们的地址区域
04 uniapp/微信小程序 项目day04

文章插图
他们两个应该来一个vif velse显示隐藏 , 判断依据就是有无adress这个地址信息对象
04 uniapp/微信小程序 项目day04

文章插图
注意这里必须转为json再去对比是否是空对象 , 因为原来也说过,空的对象返回的值是true,所以这里要转换成字符串来比较
04 uniapp/微信小程序 项目day04

文章插图
2.7.2 选择收货地址会用到一个uni的api专门用来获取用户的收货地址
uni.chooseAddress(OBJECT)
点击新增就会进来
04 uniapp/微信小程序 项目day04

文章插图
要注意这个api返回的是一个promise所以用async、await来接受
04 uniapp/微信小程序 项目day04

推荐阅读