uni-app写商品多规格sku

刘小江
2021-04-25 / 1 评论 / 42 阅读 / 正在检测是否收录...

商品多规格,如下图
微信截图_20210425124203.png
第一次接触商城项目,下面是后端返回的数据
QQ截图20210425124328.png
再看前端代码
下面这行代码是把请求的数据赋值给 product.skus
QQ截图20210425131541.png
3.png
用for循环先把规格的大分类遍历出来,然后再套一个for循环把每个规格遍历出来(第一张是效果图),遍历出来之后咋办呢,下面要开始写逻辑了,搞不懂逻辑,就开始问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问,问着问着也有了一点思路。
我们可以看到下面这行代码:

@click="skuClick(index,v.id,v.sku_ca_name)"
// index:大分类的下标
// v.id:被点击规格的id
// v.sku_ca_name:被点击规格的名称

通过skuClick点击事件分别传入了'大分类的下标','被点击规格的id' 和 '被点击规格的名称',接下来看看data中定义的数据
4.png

skuId:用于存放选中规格的ID

skuName:用于存放选中规格的名称

5.png
这段代码是放在数据请求里面的,每次请求数据的时候先把skuId和skuName里面的内容清空,不写也没事,以防万一我还是写了,再看下面的for循环:

for (let i = 0; i < _this.product.skus.length; i++) {
    _this.skuId.push([]);
    _this.skuName.push([]);
}
// _this.product.skus.length 是规格大分类的个数,比如机身颜色、存储容量、网络类型、套餐类型一共是4个
// _this.skuId.push([]); 这行代码的意思就是向skuId中动态插入4个空数组
// _this.skuName.push([]); 这行代码和上面的一样

接下来看看skuClick事件

skuClick(index, id,name) {
    let _this = this;
    let skuId = _this.skuId;
    // skuId[index] = id; //监听不到数组变化
    this.$set(skuId,index,id); //使用$set() 可以监听到数组发生改变
    this.$set(_this.skuName,index,name); //使用$set() 可以监听到数组发生改变
}
/*
    skuClick传入的参数:
        index:规格大分类的下标
        id:被点击规格的id
        name:被点击规格的name
    这个时候开始向数组中添加数据:
    this.$set(skuId,index,id); //向skuId中的index下标添加被点击的规格id;
    因为咱们上边的for循环已经向skuId中push了4个空数组,用$set就是替换了skuId数组中下标为index的元素
*/

为什么要监听数组改变呢?

因为咱们点击每个规格的时候还需要给规格添加样式,
刚开始用的 skuId[index] = id; 监听不到数组变化,后来想起了 this.$set(要改变的数组,要改变的下标,现在的值)
this.$set()方法确实可以监听到数组的变化,然后咱们就动态添加/改变class,第三张图 :class="{'active':skuId[index] == v.id}",这样就可以了哦!

0

评论 (1)

取消
  1. 头像
    Eric Jones
    MacOS · Google Chrome

    Hi, my name is Eric and I’m betting you’d like your website liuxiaojiang.top to generate more leads.

    Here’s how:
    Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It signals you as soon as they say they’re interested – so that you can talk to that lead while they’re still there at liuxiaojiang.top.

    Talk With Web Visitor – CLICK HERE https://talkwithwebvisitors.com for a live demo now.

    And now that you’ve got their phone number, our new SMS Text With Lead feature enables you to start a text (SMS) conversation – answer questions, provide more info, and close a deal that way.

    If they don’t take you up on your offer then, just follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship.

    CLICK HERE https://talkwithwebvisitors.com to discover what Talk With Web Visitor can do for your business.

    The difference between contacting someone within 5 minutes versus a half-hour means you could be converting up to 100X more leads today!

    Try Talk With Web Visitor and get more leads now.

    Eric
    PS: The studies show 7 out of 10 visitors don’t hang around – you can’t afford to lose them!
    Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
    You have customers waiting to talk with you right now… don’t keep them waiting.
    CLICK HERE https://talkwithwebvisitors.com to try Talk With Web Visitor now.

    If you'd like to unsubscribe click here http://talkwithwebvisitors.com/unsubscribe.aspx?d=liuxiaojiang.top

    回复