58 - 综合案例 - 智慧商城-10 - 商品详情页

已于 2023-10-19 17:36:35 修改
阅读量194 收藏 1
点赞数
分类专栏： Vue学习笔记 文章标签： vue.js
于 2023-10-19 17:10:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58250910/article/details/133921435
版权

一. 商品详情 - 静态布局 & 渲染

目标:实现商品详情静态结构，封装接口，完成商品详情页渲染

1. 商品详情静态结构

       views / prodetail / index.vue

<template>
  <div class="prodetail">
    <van-nav-bar fixed title="商品详情页" left-arrow @click-left="$router.go(-1)" />

    <van-swipe :autoplay="3000" @change="onChange">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>

      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }} / {{ images.length }}</div>
      </template>
    </van-swipe>

    <!-- 商品说明 -->
    <div class="info">
      <div class="title">
        <div class="price">
          <span class="now">￥0.01</span>
          <span class="oldprice">￥6699.00</span>
        </div>
        <div class="sellcount">已售1001件</div>
      </div>
      <div class="msg text-ellipsis-2">
        三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
      </div>

      <div class="service">
        <div class="left-words">
          <span><van-icon name="passed" />七天无理由退货</span>
          <span><van-icon name="passed" />48小时发货</span>
        </div>
        <div class="right-icon">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 商品评价 -->
    <div class="comment">
      <div class="comment-title">
        <div class="left">商品评价 (5条)</div>
        <div class="right">查看更多 <van-icon name="arrow" /> </div>
      </div>
      <div class="comment-list">
        <div class="comment-item" v-for="item in 3" :key="item">
          <div class="top">
            <img src="http://cba.itlike.com/public/uploads/10001/20230321/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
            <div class="name">神雕大侠</div>
            <van-rate :size="16" :value="5" color="#ffd21e" void-icon="star" void-color="#eee"/>
          </div>
          <div class="content">
            质量很不错 挺喜欢的
          </div>
          <div class="time">
            2023-03-21 15:01:35
          </div>
        </div>
      </div>
    </div>

    <!-- 商品描述 -->
    <div class="desc">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/kHgx21fZMWwqirkMhawkAw.jpg" alt="">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/0rRMmncfF0kGjuK5cvLolg.jpg" alt="">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/2P04A4Jn0HKxbKYSHc17kw.jpg" alt="">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/MT4k-mPd0veQXWPPO5yTIw.jpg" alt="">
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div @click="$router.push('/')" class="icon-home">
        <van-icon name="wap-home-o" />
        <span>首页</span>
      </div>
      <div @click="$router.push('/cart')"  class="icon-cart">
        <van-icon name="shopping-cart-o" />
        <span>购物车</span>
      </div>
      <div class="btn-add">加入购物车</div>
      <div class="btn-buy">立刻购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProDetail',
  data () {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ],
      current: 0
    }
  },
  methods: {
    onChange (index) {
      this.current = index
    }
  }
}
</script>

<style lang="less" scoped>
.prodetail {
  padding-top: 46px;
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
  img {
    display: block;
    width: 100%;
  }
  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
  }
  .desc {
    width: 100%;
    overflow: scroll;
    ::v-deep img {
      display: block;
      width: 100%!important;
    }
  }
  .info {
    padding: 10px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    .now {
      color: #fa2209;
      font-size: 20px;
    }
    .oldprice {
      color: #959595;
      font-size: 16px;
      text-decoration: line-through;
      margin-left: 5px;
    }
    .sellcount {
      color: #959595;
      font-size: 16px;
      position: relative;
      top: 4px;
    }
  }
  .msg {
    font-size: 16px;
    line-height: 24px;
    margin-top: 5px;
  }
  .service {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    margin-top: 10px;
    font-size: 16px;
    background-color: #fafafa;
    .left-words {
      span {
        margin-right: 10px;
      }
      .van-icon {
        margin-right: 4px;
        color: #fa2209;
      }
    }
  }

  .comment {
    padding: 10px;
  }
  .comment-title {
    display: flex;
    justify-content: space-between;
    .right {
      color: #959595;
    }
  }

  .comment-item {
    font-size: 16px;
    line-height: 30px;
    .top {
      height: 30px;
      display: flex;
      align-items: center;
      margin-top: 20px;
      img {
        width: 20px;
        height: 20px;
      }
      .name {
        margin: 0 10px;
      }
    }
    .time {
      color: #999;
    }
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .icon-home, .icon-cart {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      .van-icon {
        font-size: 24px;
      }
    }
    .btn-add,
    .btn-buy {
      height: 36px;
      line-height: 36px;
      width: 120px;
      border-radius: 18px;
      background-color: #ffa900;
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
    .btn-buy {
      background-color: #fe5630;
    }
  }
}

.tips {
  padding: 10px;
}
</style>
2. 封装请求接口

       api / product.js

import request from '@/utils/request'

// 获取搜索商品列表的数据
...

// 获取商品详情数据
export const getProDetail = (goodsId) => {
  return request.get('/goods/detail', {
    params: {
      goodsId
    }
  })
}

3.  页面调用请求 渲染数据

        views / prodetail / index.vue

<template>
       <van-swipe-item v-for="(image, index) in images" :key="index">
        <!-- 动态渲染轮播图 -->
        <img :src="image.external_url" />
      </van-swipe-item>


     <!-- 动态获取商品信息-->
      <div class="title">
        <div class="price">
          <!-- 动态商品信息-->
          <span class="now">￥{{ detail.goods_price_min }}</span>
          <span class="oldprice">￥{{ detail.goods_price_max }}</span>
        </div>
        <div class="sellcount">已售{{ detail.goods_sales }}件</div>
      </div>
      <div class="msg text-ellipsis-2">
        {{ detail.goods_name }}
      </div>

    <!-- 动态渲染详情图 -->
    <div class="desc" v-html="detail.content"></div>

    
</template>




<script>
import { getProDetail } from '@/api/product'
export default {
  name: 'ProDetail',
  data () {
    return {
      images: [],
      current: 0,
      detail: {}
    }
  },
  computed: {
    goodsId () {
      // 获取路由参数
      return this.$route.params.id
    }
  },
  created () {
    // 进入页面就发送请求
    this.getDatail()
  },
  methods: {
    onChange (index) {
      this.current = index
    },
    async getDatail () {
      // 调用接口请求数据
      const { data: { detail } } = await getProDetail(this.goodsId)
      this.detail = detail
      this.images = detail.goods_images
      console.log(this.images)
    }
  }
}
</script>
     4. 代码示例

二. 商品详情-评论渲染

1. 封装请求接口

         api / product.js

// 获取商品评价
export const getProComments = (goodsId, limit) => {
  return request.get('/comment/listRows', {
    params: {
      goodsId,
      limit
    }
  })
}
2. 页面调用方法 渲染数据

        views / prodetail / index.vue

 <template>
<!-- 商品评价 -->
    <div class="comment">
      <div class="comment-title">
        <!-- 动态渲染条数 -->
        <div class="left">商品评价 ({{total}}条)</div>
        <div class="right">查看更多 <van-icon name="arrow" /> </div>
      </div>
      <div class="comment-list">
        <!-- 动态渲染评论信息 -->
        <div class="comment-item" v-for="item in commentList" :key="item.comment_id">
          <div class="top">
            <!-- a||b: 默认值,a不存在就使用b-->
            <img :src="item.user.avatar_url || defaultImg" alt="">
            <div class="name">{{ item.user.nick_name }}</div>
            <van-rate :size="16" :value="item.score / 2" color="#ffd21e" void-icon="star" void-color="#eee"/>
          </div>
          <div class="content">
           {{ item.content }}
          </div>
          <div class="time">
            {{ item.create_time }}
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { getProDetail, getProComments } from '@/api/product'
import defaultImg from '@/assets/1.png'
export default {
  name: 'ProDetail',
  data () {
    return {
      ...
      total: 0, // 评价总数
      commentList: [], // 评价列表
      defaultImg: defaultImg // 默认头像
    }
  },
  computed: {
    // 获取路由参数
    ...
  },
  created () {
    // 进入页面就发送请求
    ...
    this.getComments()
  },
  methods: {
    //轮播
    ...
    // 获取商品详情
   ...
    // 获取评价
    async getComments () {
      // 调用接口请求数据
      const { data: { list, total } } = await getProComments(this.goodsId, 3)
      this.commentList = list
      this.total = total
    }
  }
}
</script>
3. 代码示例

三. 加入购物车 - 唤起弹层

1.  按需导入组件

        utils / vant-ui.js

// 按需导入
import Vue from 'vue'
import {ActionSheet} from 'vant'

Vue.use(ActionSheet)
2. 注册点击事件,点击唤起弹窗

        views / prodetail / index.vue

<template>
<!-- 底部 -->
    <div class="footer">
      ...
      <!-- 3. 点击后唤起弹层 -->
      <div class="btn-add" @click="addFn">加入购物车</div>
      <div class="btn-buy" @click="buyFn">立刻购买</div>
    </div>

    <!-- 1. 加入购物车的弹层 -->
    <van-action-sheet v-model="showPannel" :title="mode==='cart'? '加入购物车' : '立刻购买'">
      <div class="content">内容</div>
    </van-action-sheet>
</template>

<script>
import { getProDetail, getProComments } from '@/api/product'
import defaultImg from '@/assets/1.png'
export default {
  name: 'ProDetail',
  data () {
    return {
     ...
      // 2.定义数据
      showPannel: false, // 控制弹层的显示隐藏
      mode: 'cart' // 标记弹起状态
    }
  },
  // 获取路由参数
  ...
  },
  methods: {
    ...
    addFn () {
      this.mode = 'cart'
      this.showPannel = true
    },
    buyFn () {
      this.mode = 'buyNow'
      this.showPannel = true
    }
  }
}
</script>
3. 完善弹层结构

         views / prodetail / index.vue

<!-- 替换 上面的弹层组件-->
<van-action-sheet v-model="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
  <div class="product">
    <div class="product-title">
      <div class="left">
        <img src="http://cba.itlike.com/public/uploads/10001/20230321/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="right">
        <div class="price">
          <span>¥</span>
          <span class="nowprice">9.99</span>
        </div>
        <div class="count">
          <span>库存</span>
          <span>55</span>
        </div>
      </div>
    </div>
    <div class="num-box">
      <span>数量</span>
      数字框占位
    </div>
    <div class="showbtn" v-if="true">
      <div class="btn" v-if="true">加入购物车</div>
      <div class="btn now" v-else>立刻购买</div>
    </div>
    <div class="btn-none" v-else>该商品已抢完</div>
  </div>
</van-action-sheet>
// 弹层组件的样式 
.product {
  .product-title {
    display: flex;
    .left {
      img {
        width: 90px;
        height: 90px;
      }
      margin: 10px;
    }
    .right {
      flex: 1;
      padding: 10px;
      .price {
        font-size: 14px;
        color: #fe560a;
        .nowprice {
          font-size: 24px;
          margin: 0 5px;
        }
      }
    }
  }

  .num-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }

  .btn, .btn-none {
    height: 40px;
    line-height: 40px;
    margin: 20px;
    border-radius: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 148, 2);
  }
  .btn.now {
    background-color: #fe5630;
  }
  .btn-none {
    background-color: #cccccc;
  }
}
4. 动态渲染弹层

         views / prodetail / index.vue

 <van-action-sheet v-model="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
  <div class="product">
    <div class="product-title">
      <div class="left">
        <img :src="detail.goods_image" alt="">
      </div>
      <div class="right">
        <div class="price">
          <span>¥</span>
          <span class="nowprice">{{ detail.goods_price_min }}</span>
        </div>
        <div class="count">
          <span>库存</span>
          <span>{{ detail.stock_total }}</span>
        </div>
      </div>
    </div>
    <div class="num-box">
      <span>数量</span>
      数字框占位
    </div>
    <!-- 有库存才显示提交按钮  -->
    <div class="showbtn" v-if="detail.stock_total > 0">
      <div class="btn" v-if="mode==='cart'">加入购物车</div>
      <div class="btn now" v-else>立刻购买</div>
    </div>
    <div class="btn-none" v-else>该商品已抢完</div>
  </div>
</van-action-sheet>

四. 数字框基本封装

目标:封装弹层中的数字框组件

分析:组件名 CountBox
        (1). 静态结构，左中右三部分

        (2).数字框的数字，应该是外部传递进来的(父传子)

        (3).点击 + - 号，可以修改数字(子传父)

        (4).使用 v-model 实现封装(:value 和 @input 的简写)

        (5).数字不能减到小于 1

1. 新建数字框组件

        components / CountBox.vue

<template>
<div class="count-box">
    <button class="minus">-</button>
    <input :value="1" class="inp" type="text">
    <button class="add">+</button>
</div>

</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.count-box{
    width:110px;
    display:flex;
    .add, .minus{
        width:30px;
        height:30px;
        outline:none;
        border:none;
        background-color:#efefef;
    }
    .inp{
        width:40px;
        height:30px;
        outline:none;
        border:none;
        margin:0 5px;
        background-color:#efefef;
        text-align: center;
    }

}
</style>
2. 详情页使用数字组件

       views / prodetail / index.vue

 <div class="num-box">
      <span>数量</span>
       <!--使用数字组件-->
      <CountBox></CountBox>
</div>

-------------------------------------------------

<script>
// 1. 导入数字组件
import CountBox from '@/components/CountBox.vue'
export default {
  name: 'ProDetail',
  // 2. 注册
  components: { CountBox },
}

3.定义数字框数字传递给子组件(父传子)

        views / prodetail / index.vue

<!--父组件传递数据给子组件-->

<!-- v-model 本质上 :value 和 @input 的简写 -->
<CountBox v-model="addCount"></CountBox>

--------------------------------------

<script>
data () {
    return {
      addCount: 1 // 数字框绑定的数据
    }
  }
</script>

               components / CountBox.vue 

<!--子组件接收数据-->

 <!-- 动态绑定数据 -->
 <input :value="value" class="inp" type="text">

---------------------------

<script>
export default {
  // 接收父组件数据
  props: {
    value: {
      type: Number,
      default: 1
    }
  }

}
</script>
4. 数字框点击 + - 修改数字(子传父)

           components / CountBox.vue 

<template>
<div class="count-box">
    <!--注册点击事件-->
    <button @click="handleSub" class="minus">-</button>
    <!-- 动态绑定数据 -->
    <input :value="value" class="inp" type="text">
    <button @click="handleAdd" class="add">+</button>
</div>

</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handleSub () {
      if (this.value <= 1) {
        return
      }
      this.$emit('input', this.value - 1)
    },
    handleAdd () {
      this.$emit('input', this.value + 1)
    }
  }

}
</script>
5. 数字框手动输入值(子传父)

           components / CountBox.vue 

<!-- @change: 允许输入框输入数字,失去焦点或回车触发 -->
<input :value="value" class="inp" type="text" @change="handleChange">

-------------------

<script>
 methods: {
    ...    
    handleChange (e) {
    //   console.log(e.target.value)
      const num = +e.target.value // 转数字处理(1)数字 (2)NaN
      // 输入了不合法文本 或 输入了 负值,回退成原来的 value 值
      if (isNaN(num) || num < 1) {
        e.target.value = this.value
        return
      }

      this.$emit('input', num)
    }
  }

}
</script>
6. 代码示例

五. 加入购物车-判断token登录提示

目标:给未登录的用户，添加登录提示

说明:加入购物车，是一个 登录后的用户 才能进行的操作

所以需要进行鉴权判断，判断用户 token 是否存在

        (1). 若存在:继续加入购物车操作

        (2). 不存在:提示 用户未登录，引导到登录页，登录完回跳

1. 导入组件

        utils / vant-ui.js

// 按需导入
import Vue from 'vue'
import {Dialog} from 'vant'

Vue.use(Dialog)
2. 详情页增加token验证

        views / prodetail / index.vue

<!--注册点击事件-->
<div class="btn" v-if="mode==='cart'" @click="addCart">加入购物车</div>

<script>
 methods: {
    addCart () {
      // 判断 token是否存在
      // 1. 如果token不存在, 弹确认框
      // 2. 如果token存在, 继续请求操作
      if (!this.$store.getters.token) {
        // 弹确认框
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登录',
          cancelButtonText: '在逛逛'
        })
          .then(() => {
            // 如果希望, 跳转到登录 => 登录后能回跳回来,需要在跳转去携带参数(当前的路径地址)
            // this.$route.fullPath(会包含查询参数)
            // replace: 跳转路由,会将上一个replace路由替换成本次replace路由
            this.$router.replace({
              path: '/login',
              // 额外携带参数
              query: {
                backUrl: this.$route.fullPath
              }
            })
          }).catch(() => {})
        return
      }

      console.log('正常请求')
    }
  }

</script>
3. 登录页做回跳判断

        views / login / index.vue

  // 登录
    async login () {
      ...
      this.$toast('登陆成功')

      // 进行判断,看地址栏有无回跳地址
      // 1. 如果有 => 说明是其他页面,拦截到登录来的,需要回跳
      // 2. 如果没有 => 正常渠首页
      const url = this.$route.query.backUrl || '/'
      this.$router.replace(url)
    }
4. 代码示例

六. 加入购物车-封装接口进行请求

目标:封装接口，进行加入购物车的请求        

        (1). api/cart.js 中封装接口
        (2).页面中调用接口
        (3).遇到问题:接口需要传递 token
        (4).解决问题:请求拦截器统一携带 token
        (5).小图定制

1. 封装接口

         api / cart.js

import request from '@/utils/request'

// 加入购物车
// goodsId => 商品id iphone8
// goodsSkuId => 商品规格id 红色的iphone 粉色的iphone
export const addCart = (goodsId, goodsNum, goodsSkuId) => {
  return request.post('/cart/add', {
    goodsId,
    goodsNum,
    goodsSkuId
  })
}

2. 页面中调用接口

        views / prodetail / index.vue

<script>
import { addCart } from '@/api/cart'

 data () {
    return {
     ...
      cartTotal: 0 // 购物车角标
    }
  },

 async addCart () {
      // 判断 token是否存在
      // 1. 如果token不存在, 弹确认框
      // 2. 如果token存在, 继续请求操作
      //if (!this.$store.getters.token) {
        // 弹确认框
      //  this.$dialog.confirm({
       //   title: '温馨提示',
      //    message: '此时需要先登录才能继续操作哦',
      //    confirmButtonText: '去登录',
      //    cancelButtonText: '在逛逛'
      //  })
        //  .then(() => {
            // 如果希望, 跳转到登录 => 登录后能回跳回来,需要在跳转去携带参数(当前的路径地址)
            // this.$route.fullPath(会包含查询参数)
            // replace: 跳转路由,会将上一个replace路由替换成本次replace路由
         //   this.$router.replace({
         //     path: '/login',
        //      // 额外携带参数
         //     query: {
         //       backUrl: this.$route.fullPath
         //     }
       //     })
       //   }).catch(() => {})
      //  return
     // }
      // console.log('正常请求')
      const { data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
      this.cartTotal = data.cartTotal
      this.$toast('加入购物车成功')
      this.showPannel = false // 关闭弹层
      console.log(this.cartTotal)
    }
  }
</script>
3. 请求拦截器增加token

        utils / request.js

import store from '@/store/index'

// 添加请求拦截器
//instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 开启loading,禁止背景点击(节流处理,防止多次无效点击)
 // Toast.loading({
  //  message: '加载中...',
   // forbidClick: true, // 禁止背景点击
   // loadingType: 'spinner', // 配置loading图标
   // duration: 0 // loading不会自动消失
//  })

  // 只要有token,就在请求时携带,便于请求需要授权的接口
  const token = store.getters.token
  if (token) {
    // 添加请求头
    config.headers['Access-Token'] = token
    config.headers.platform = 'H5'
  }

//  return config
//}, function (error) {
  // 对请求错误做些什么
//  return Promise.reject(error)
//})
4. 页面中准备小图标 

        views / prodetail / index.vue

<!--底部-->
div class="icon-cart">
   <span v-if="cartTotal > 0" class="num">{{ cartTotal }}</span>
   <van-icon name="shopping-cart-o" />
   <span>购物车</span>
</div>
5. 定制小图标样式 
.footer .icon-cart {
  position: relative;
  padding: 0 6px;
  .num {
    z-index: 999;
    position: absolute;
    top: -2px;
    right: 0;
    min-width: 16px;
    padding: 0 4px;
    color: #fff;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 50%;
  }
}

一个微不足道的bug
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中如何实现列表的详情页获取及渲染使用query方法
weixin_49356003的博客
12-01 1002
<van-image :src="ele.pic" @click="$router.push({name:'apps',query:{id:ele.id}})"/>
【前端】Vue项目：旅游App-（21）detail：房屋详情页及其数据、返回导航栏、轮播图
karshey的博客
02-06 797
detail：房屋详情页及其数据、返回导航栏、轮播图
07.智慧商城——商品详情页、加入购物车、拦截器封装token
m0_53951384的博客
11-17 285
01. 商品详情 - 静态布局 静态结构 和 样式 <template> <div class="prodetail"> <van-nav-bar fixed title="商品详情页" left-arrow @click-left="$router.go(-1)" /> <van-swipe :autoplay="3000" @change="onChange"> <van-swipe-item v-for="(im
智慧商城（continue）
最新发布
AYBBZXY的博客
02-02 1091
通过插槽可以自定义面板的展示内容，同时可以使用title属性展示标题栏。
【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面的轮播图功能实现
热门推荐
时光隧道
09-29 1万+
轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面，还有网易云音乐App的发现模块主页。小程序swiper的api属性类型默认值必填说明最低版本booleanfalse否是否显示面板指示点1.0.0color否指示点颜色1.1.0color#000000否当前选中的指示点颜色1.1.0autoplaybooleanfalse否。
LTE-RF案例分析.doc
09-23
在科技园E的58小区，由于114号和58号小区PCI模3相等，导致SINR恶化，解决方案是调整PCI分配，确保相邻小区之间PCI模3不相等，以减少干扰。 综上所述，LTE-RF案例分析涉及网络覆盖的优化，包括弱覆盖的排查和改进，...
avcodec-58.dll
04-11
avcodec-58.dll，有需要的自然懂，你不需要你就不用下载，这个资源不要钱，你要是觉得过意不去，帮我的博客点个赞就好了
base58-monero-rs：Monero base58 Rust实现
02-03
`base58-monero-rs`是一个Rust编程语言编写的库，专门用于处理Monero的Base58编码。这个库的目的是为了在Rust环境中方便地进行Base58和Base58Check编码和解码操作，这对于开发Monero相关的钱包、工具或服务是至关...
58-抢答器(51单片机C语言实例Proteus仿真和代码)
06-15
58-抢答器(51单片机C语言实例Proteus仿真和代码)58-抢答器(51单片机C语言实例Proteus仿真和代码)58-抢答器(51单片机C语言实例Proteus仿真和代码)58-抢答器(51单片机C语言实例Proteus仿真和代码)58-抢答器(51单片机...
DAT 58-2014 《电子档案管理基本术语》.pdf
06-28
DAT 58-2014 《电子档案管理基本术语》 1 范围 2 一般概念 3 电子档案的收集与整理 4 电子档案的鉴定与处置 5 电子档案的保存与利用 6 电子档案的安全
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目
03-05
较为简单的基于vant, vue, axios, vuex的移动端项目, 仿小米商场移动端项目。 有基本的页面和假数据, 适合作为电商项目的启动模板或者用作学生毕设学习使用。
Vue3+vant实现京东新品效果
zhangyun1107892254的博客
11-08 514
吸顶tab，滚动条记录
vue2+vant 简易实现京东app商城（附源码）
qq_66839130的博客
11-13 9940
简易京东商城，登录页面，首页，商品分类页，购物车，用户页面，简易商品详情页面
Vue 实现商品分类、列表、详情、购物车、搜索（vant）
且看烟高云低处 远眸尽过满落辰
01-22 7215
商品分类Classify： <template> <div> <div style="display: flex;"> <div class="oneNav"> <!-- vant侧边导航 --> <van-sidebar style="height: 617px; white-space: nowrap; overflow-y: scroll;" v-model="activeKey">
Vue/Vant——商品详情页中的弹窗选项卡
NanChen的博客
12-28 1256
这里整理一下思路，首先布局一下图片，其次去写按钮的样式，并把获取到的价格以及名称放在图片又边的位置最后计算购买数量以及限购条件 这里主要说一下按钮部分怎么去写，效果大概如下 首先需要准备一个数组里面包含俩对象 selects代表一个数组里面包含selectdd用来判断颜色，list列表中放两个按钮名称 selects: [ { title: "颜色", selected: 0, list: [ ...
Vant-Weapp小程序+商城案例
weixin_34186950的博客
12-27 1813
功能还在进一步完善中，欢迎扫一扫提出宝贵意见！ 详细信息可进群沟通： 转载于:https://www.cnblogs.com/CinderellaStory/p/10184562.html
vue实现商品详情页功能之商品选项卡
我的第一篇文章
05-08 6468
用户点击商品进入商品详情页，默认显示第一个小图对应的大图，然后鼠标滑到小图上，大图也会发生改变，实现效果如下： 实现代码： shopitem.vue的template（HTML）,上面是大图，下面是小图，鼠标滑动到小图上，触发getUrl事件（参数是小图的show属性，索引）： item.json文件（我的数据文件，默认第一个小图的show为true，默认大图显示第一张。大图和小...
day07-商品详情页&购物车
码化疼
11-22 845
商品详情页 在mixins文件夹下创建相应的 main.js 文件，创建好js的架子 import wepy from 'wepy' export default class extends wepy.mixin { data = { goods_id: '' } onLoad(options) { this.goods_id = opton...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值