vue tab滑动（非组件）

   <div class="shop">

        <!-- 手写tab -->

        <div class="shop-tab">

          <ul class="tab-tit">

            <li

              style="font-size:16px;font-weight:600;color:#333333"

              v-if="cur===0"

              @click="cur=0"

              :class="{active:cur==0}"

            >

              全部

              <i v-if="cur===0"></i>

            </li>

            <li style="padding-top:1px;" v-if="cur===1" @click="cur=0" :class="{active:cur==0}">全部</li>

            <li

              style="font-size:16px;font-weight:600;margin-left:8px;color:#333333"

              v-if="cur===1"

              @click="cur=1"

              :class="{active:cur==1}"

            >

              积分专区

              <i v-if="cur===1"></i>

            </li>

            <li style="margin-left:8px;" v-if="cur===0" @click="cur=1" :class="{active:cur==1}">积分专区</li>

          </ul>

        </div>

        <!-- ---------------------------------------- -->

        <div class="shop-tab-content">

          <div>

            <div class="shop-tab-content-item">

              <div

                class="shop-tab-content-item-whole div-right"

                v-for="(i,index) in goods"

                :key="i.goodsSn"

                :style="{'animation-delay': index *0.2+'s'}"

                @click="toDetail(i.id)"

              >

                <div class="shop-tab-content-item-whole-top">

                  <div class="img">

                    <img :src="i.picUrl" :οnerrοr="noPicture" alt />

                  </div>

                </div>

                <div class="shop-tab-content-item-whole-bottom">

                  <div class="shop-tab-content-item-whole-bottom-name">{{i.name}}</div>

                  <div class="shop-tab-content-item-whole-bottom-price">

                    <div>

                      <span>￥{{i.retailPrice}}</span>

                      <span

                        class="shop-tab-content-item-whole-bottom-price-original"

                      >￥{{i.counterPrice}}</span>

                    </div>

                    <span class="shop-tab-content-item-whole-bottom-price-but">抢购</span>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

 

 

 data () {

    return {

      noPicture: 'this.src="' + require('../../assets/imgs/home/faild7.png') + '"',  //默认占位

      goods: [],  

      cur: 0

    }

  },

  mounted () {

    this.getBanners()

  },

  created () {

    this.getGoods()

  },

  watch: {

    cur (n, o) {

      if (n == 1) {

        this.getIntegralList()

      } else if (n == 0) {

        this.getGoods()

      }

    },

    deep: true

  },

 

  methods: {

    // 获取商品列表

    async getGoods () {

      const goods = await Apis.getGoodsList()

      this.goods = goods.data

    },

    //获取积分专区

    async getIntegralList () {

      let goods = await Apis.getIntegral()

      this.goods = goods.data

    },

}