互动网站建设,多多在线免费观看电视剧,已经备案的域名做电影网站,可遇公寓网站哪个公司做的提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 9.1 商品列表区域9.1.1 渲染购物车商品列表的标题区域9.1.2 渲染商品列表区域的基本结构9.1.3 为 my-goods 组件封装 radio 勾选状态9.1.4 为 my-goods 组件封装 ra… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 9.1 商品列表区域9.1.1 渲染购物车商品列表的标题区域9.1.2 渲染商品列表区域的基本结构9.1.3 为 my-goods 组件封装 radio 勾选状态9.1.4 为 my-goods 组件封装 radio-change 事件9.1.5 修改购物车中商品的勾选状态9.1.6 为 my-goods 组件封装 NumberBox9.1.7 为 my-goods 组件封装 num-change 事件9.1.8 解决 NumberBox 数据不合法的问题9.1.10 修改购物车中商品的数量9.1.11 渲染滑动删除的 UI 效果9.1.12 实现滑动删除的功能 9.1 商品列表区域
9.1.1 渲染购物车商品列表的标题区域 UI 结构
view classcart-title!-- 左侧图标 --uni-icons typeshop size18/uni-icons!-- 描述文本 --text classcart-title-text购物车/text/view样式
style langscss
.cart-title{height: 40px;display: flex;align-items: center;font-size: 14px;padding-left: 5px;border-bottom: 1px solid #efefef;.cart-title-text{margin-left: 10px;}
}
/style9.1.2 渲染商品列表区域的基本结构
通过 mapState 辅助函数将 Store 中的 cart 数组映射到当前页面中使用
import badgeMix from /mixins/tabbar-badge.js
// 按需导入 mapState 这个辅助函数
import { mapState } from vuexexport default {mixins: [badgeMix],computed: {// 将 m_cart 模块中的 cart 数组映射到当前页面中使用...mapState(m_cart, [cart]),},data() {return {}},
}在 UI 结构中通过 v-for 指令循环渲染自定义的 my-goods 组件
!-- 商品列表区域 --
block v-for(goods, i) in cart :keyimy-goods :goodsgoods/my-goods
/block9.1.3 为 my-goods 组件封装 radio 勾选状态
!-- 商品左侧图片区域 --
view classgoods-item-leftradio checked color#C00000/radioimage :srcgoods.goods_small_logo || defaultPic classgoods-pic/image
/view给类名为 goods-item-left 的 view 组件添加样式实现 radio 组件和 image 组件的左右布局
.goods-item-left {margin-right: 5px;display: flex;justify-content: space-between;align-items: center;.goods-pic {width: 100px;height: 100px;display: block;}
}封装名称为 showRadio 的 props 属性来控制当前组件中是否显示 radio 组件
export default {// 定义 props 属性用来接收外界传递到当前组件的数据props: {// 商品的信息对象goods: {type: Object,default: {},},// 是否展示图片左侧的 radioshowRadio: {type: Boolean,// 如果外界没有指定 show-radio 属性的值则默认不展示 radio 组件default: false,},},
}使用 v-if 指令控制 radio 组件的按需展示
!-- 商品左侧图片区域 --
view classgoods-item-left!-- 使用 v-if 指令控制 radio 组件的显示与隐藏 --radio checked color#C00000 v-ifshowRadio/radioimage :srcgoods.goods_small_logo || defaultPic classgoods-pic/image
/view在 cart.vue 页面中的商品列表区域指定 :show-radio“true” 属性从而显示 radio 组件
!-- 商品列表区域 --
block v-for(goods, i) in cart :keyimy-goods :goodsgoods :show-radiotrue/my-goods
/block修改 my-goods.vue 组件动态为 radio 绑定选中状态
!-- 商品左侧图片区域 --
view classgoods-item-left!-- 存储在购物车中的商品包含 goods_state 属性表示商品的勾选状态 --radio :checkedgoods.goods_state color#C00000 v-ifshowRadio/radioimage :srcgoods.goods_small_logo || defaultPic classgoods-pic/image
/view9.1.4 为 my-goods 组件封装 radio-change 事件
当用户点击 radio 组件希望修改当前商品的勾选状态此时用户可以为 my-goods 组件绑定 radio-change 事件从而获取当前商品的 goods_id 和 goods_state
!-- 商品列表区域 --
block v-for(goods, i) in cart :keyi!-- 在 radioChangeHandler 事件处理函数中通过事件对象 e得到商品的 goods_id 和 goods_state --my-goods :goodsgoods :show-radiotrue radio-changeradioChangeHandler/my-goods
/block定义 radioChangeHandler 事件处理函数
methods: {// 商品的勾选状态发生了变化radioChangeHandler(e) {console.log(e) // 输出得到的数据 - {goods_id: 395, goods_state: false}}
}在 my-goods.vue 组件中为 radio 组件绑定 click 事件处理函数
!-- 商品左侧图片区域 --
view classgoods-item-leftradio :checkedgoods.goods_state color#C00000 v-ifshowRadio clickradioClickHandler/radioimage :srcgoods.goods_small_logo || defaultPic classgoods-pic/image
/view在 my-goods.vue 组件的 methods 节点中定义 radioClickHandler 事件处理函数
methods: {// radio 组件的点击事件处理函数radioClickHandler() {// 通过 this.$emit() 触发外界通过 绑定的 radio-change 事件// 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数this.$emit(radio-change, {// 商品的 Idgoods_id: this.goods.goods_id,// 商品最新的勾选状态goods_state: !this.goods.goods_state})}
}9.1.5 修改购物车中商品的勾选状态
在 store/cart.js 模块中声明如下的 mutations 方法用来修改对应商品的勾选状态
// 更新购物车中商品的勾选状态
updateGoodsState(state, goods) {// 根据 goods_id 查询购物车中对应商品的信息对象const findResult state.cart.find(x x.goods_id goods.goods_id)// 有对应的商品信息对象if (findResult) {// 更新对应商品的勾选状态findResult.goods_state goods.goods_state// 持久化存储到本地this.commit(m_cart/saveToStorage)}
}在 cart.vue 页面中导入 mapMutations 这个辅助函数从而将需要的 mutations 方法映射到当前页面中使用
import badgeMix from /mixins/tabbar-badge.js
import { mapState, mapMutations } from vuexexport default {mixins: [badgeMix],computed: {...mapState(m_cart, [cart]),},data() {return {}},methods: {...mapMutations(m_cart, [updateGoodsState]),// 商品的勾选状态发生了变化radioChangeHandler(e) {this.updateGoodsState(e)},},
}9.1.6 为 my-goods 组件封装 NumberBox
注意NumberBox 组件是 uni-ui 提供的修改 my-goods.vue 组件的源代码在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构
view classgoods-info-box!-- 商品价格 --view classgoods-price{{goods.goods_price | tofixed}}/view!-- 商品数量 --uni-number-box :min1/uni-number-box
/view样式
.goods-item-right {display: flex;flex: 1;flex-direction: column;justify-content: space-between;.goods-name {font-size: 13px;}.goods-info-box {display: flex;align-items: center;justify-content: space-between;}.goods-price {font-size: 16px;color: #c00000;}
}在 my-goods.vue 组件中动态为 NumberBox 组件绑定商品的数量值
view classgoods-info-box!-- 商品价格 --view classgoods-price{{goods.goods_price | tofixed}}/view!-- 商品数量 --uni-number-box :min1 :valuegoods.goods_count/uni-number-box
/view在 my-goods.vue 组件中封装名称为 showNum 的 props 属性来控制当前组件中是否显示 NumberBox 组件
export default {// 定义 props 属性用来接收外界传递到当前组件的数据props: {// 商品的信息对象goods: {type: Object,defaul: {},},// 是否展示图片左侧的 radioshowRadio: {type: Boolean,// 如果外界没有指定 show-radio 属性的值则默认不展示 radio 组件default: false,},// 是否展示价格右侧的 NumberBox 组件showNum: {type: Boolean,default: false,},},
}在 my-goods.vue 组件中使用 v-if 指令控制 NumberBox 组件的按需展示
view classgoods-info-box!-- 商品价格 --view classgoods-price{{goods.goods_price | tofixed}}/view!-- 商品数量 --uni-number-box :min1 :valuegoods.goods_count changenumChangeHandler v-ifshowNum/uni-number-box
/view在 cart.vue 页面中的商品列表区域指定 :show-num“true” 自定义属性从而显示 NumberBox 组件
!-- 商品列表区域 --
block v-for(goods, i) in cart :keyimy-goods :goodsgoods :show-radiotrue :show-numtrue radio-changeradioChangeHandler/my-goods
/block9.1.7 为 my-goods 组件封装 num-change 事件
当用户修改了 NumberBox 的值以后希望将最新的商品数量更新到购物车中此时需要为 my-goods 组件绑定 num-change 自定义事件获取当前商品的 goods_id 和 goods_count
!-- 商品列表区域 --
block v-for(goods, i) in cart :keyimy-goods :goodsgoods :show-radiotrue :show-numtrue radio-changeradioChangeHandler num-changenumberChangeHandler/my-goods
/block定义 numberChangeHandler 事件处理函数
// 商品的数量发生了变化
numberChangeHandler(e) {console.log(e)
}在 my-goods.vue 组件中为 uni-number-box 组件绑定 change 事件处理函数 uni-number-box :min1 :valuegoods.goods_count changenumChangeHandler v-ifshowNum/uni-number-box在 my-goods.vue 组件的 methods 节点中定义 numChangeHandler 事件处理函数
methods: {// NumberBox 组件的 change 事件处理函数numChangeHandler(val) {// 通过 this.$emit(事件名,{需要传的数据}) 触发外界通过 绑定的 num-change 自定义事件this.$emit(num-change, {// 商品的 Idgoods_id: this.goods.goods_id,// 商品的最新数量goods_count: val})}
}9.1.8 解决 NumberBox 数据不合法的问题
当用户在 NumberBox 中输入字母等非法字符之后会导致 NumberBox 数据紊乱的问题打开项目根目录中 uni_modules/uni-number-box/components//uni-number-box/uni-number-box.vue 组件修改 methods 节点中的 _onBlur 函数
_onBlur(event) {// 官方的代码没有进行数值转换用户输入的 value 值可能是非法字符// let value event.detail.value;// 将用户输入的内容转化为整数let value parseInt(event.detail.value);if (!value) {// 如果转化之后的结果为 NaN则给定默认值为 1this.inputValue 1;return;}// 省略其它代码...
}修改完毕之后用户输入小数会被转化为整数用户输入非法字符会被替换为默认值 1
9.1.10 修改购物车中商品的数量
在 store/cart.js 模块中声明如下的 mutations 方法
// 更新购物车中商品的数量
updateGoodsCount(state, goods) {// 根据 goods_id 查询购物车中对应商品的信息对象const findResult state.cart.find(x x.goods_id goods.goods_id)if(findResult) {// 更新对应商品的数量findResult.goods_count goods.goods_count// 持久化存储到本地this.commit(m_cart/saveToStorage)}
}在 cart.vue 页面中通过 mapMutations 这个辅助函数将需要的 mutations 方法映射到当前页面中使用
import { mapState, mapMutations } from vuex
export default {mixins: [badgeMix],computed: {...mapState(m_cart, [cart]),},data() {return {}},methods: {...mapMutations(m_cart, [updateGoodsState, updateGoodsCount]),// 商品的勾选状态发生了变化radioChangeHandler(e) {this.updateGoodsState(e)},// 商品的数量发生了变化numberChangeHandler(e) {this.updateGoodsCount(e)},},
}9.1.11 渲染滑动删除的 UI 效果
滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item。详细的请参考SwipeAction 滑动操作官方文档改造 cart.vue 页面的 UI 结构将商品列表区域的结构修改如下
uni-swipe-actionblock v-for(goods, i) in cart :keyi!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 --uni-swipe-action-item :right-optionsoptions clickswipeActionClickHandler(goods)my-goods :goodsgoods :show-radiotrue :show-numtrue radio-changeradioChangeHandler num-changenumberChangeHandler/my-goods/uni-swipe-action-item/block
/uni-swipe-action在 data 节点中声明 options 数组用来定义操作按钮的配置信息
data(){return{options:[{text:删除,style:{backgroundColor:#C00000}} ] }
}在 methods 中声明 uni-swipe-action-item 组件的 click 事件处理函数
methods:{// 点击了滑动操作按钮
swipeActionClickHandler(goods) {console.log(goods)
}
}美化 my-goods.vue 组件的样式
.goods-item {// 让 goods-item 项占满整个屏幕的宽度width: 750rpx;// 设置盒模型为 border-boxbox-sizing: border-box;display: flex;padding: 10px 5px;border-bottom: 1px solid #f0f0f0;
}9.1.12 实现滑动删除的功能
在 store/cart.js 模块的 mutations 节点中声明如下的方法从而根据商品的 Id 从购物车中移除对应的商品
//根据id从购物车中删除对应的商品信息removeGoodsById(state,goods_id){// 调用数组的 filter 方法进行过滤,重新赋值(剩下的商品)state.cart state.cart.filter(xx.goods_id ! goods_id)//持久化存储本地this.commit(m_cart/saveToStorage)}在 cart.vue 页面中使用 mapMutations 辅助函数把需要的方法映射到当前页面中使用
methods: {...mapMutations(m_cart, [updateGoodsState, updateGoodsCount, removeGoodsById]),// 商品的勾选状态发生了变化radioChangeHandler(e) {this.updateGoodsState(e)},// 商品的数量发生了变化numberChangeHandler(e) {this.updateGoodsCount(e)},// 点击了滑动操作按钮swipeActionClickHandler(goods) {this.removeGoodsById(goods.goods_id)}
}
