黑马程序员uni-app 小兔鲜儿项目及bug记录（下） Day 5（有作业）-阿里云开发者社区

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客

这是我的 github https://github.com/Qiuner ⭐️

gitee https://gitee.com/Qiuner 🌹

如果本篇文章帮到了你不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多那就点个关注吧我会尽力带来有趣的内容 😎

黑马程序员uni-app 小兔鲜儿项目及bug记录（下） Day 5

可在微信小程序端的控制台里通过输入 getCurrenPages( ) 打印未被销毁的页面们
同理也可在控制台输入很多东西来便于开发和调试

Day 5

地址模块

静态导入的代码有问题需要修改

// src/pagesMember/settings/settings.vue
      
<navigator url="/pagesMember/address/address" hover-class="none" class="item arrow">

修改地址这里传递了要修改哪个地址的id 于是在子组件进行接收然后进行判断

这里的代码没有什么好说的和前面的代码高度重复相关文档也有代码就不贴了
下面是一个Vue的基本解释

为什么会有ev.detail.value而不是ev.value

因为这是vue的事件对象，每一个事件处理函数都有一个事件处理对象叫 event 或叫ev
这个事件对象将数据放在了detail里面

地址列表渲染

使用onShow解决只有在页面加载的时候才刷新问题

修改地址模块

数据回显

使用uniapp校验表单

第一步定义校验规则

以上为表单的数据和字段

后面的errorMessage是标签

第二步更改原本的标签

收货地址删除

SKU模块

SKU发明就是为了解决商品有没有货的问题

使用这个注释解决es校验

eslint-disable

https://ext.dcloud.net.cn/plugin?id=2848

SKU模块大bug

本bug会导致后面都无法运行在购物车种可以正常弹出但后面点击商品详情缺不能正常显示

换成这个就好了

if (val > this.max) {
        val = this.max
      } else if (val < this.min) {
        val = this.min
      }

下面是健全的代码

<!-- 步进器 -->
<template>
  <view class="vk-data-input-number-box">
    <view
      class="u-icon-minus"
      :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
      :style="{
        background: bgColor,
        height: inputHeight + 'rpx',
        color: color,
        fontSize: size + 'rpx',
        minHeight: '1.4em',
      }"
      @click="emptyClick"
      @touchstart.prevent="btnTouchStart('minus')"
      @touchend.stop.prevent="clearTimer"
    >
      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">－</view>
    </view>
    <input
      v-model="inputVal"
      :disabled="disabledInput || disabled"
      :cursor-spacing="getCursorSpacing"
      :class="{ 'u-input-disabled': disabled }"
      class="u-number-input"
      type="number"
      :style="{
        color: color,
        fontSize: size + 'rpx',
        background: bgColor,
        height: inputHeight + 'rpx',
        width: inputWidth + 'rpx',
      }"
      @blur="onBlur"
      @click="showInput = true"
    />
    <view
      class="u-icon-plus"
      :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
      :style="{
        background: bgColor,
        height: inputHeight + 'rpx',
        color: color,
        fontSize: size + 'rpx',
        minHeight: '1.4em',
      }"
      @click="emptyClick"
      @touchstart.prevent="btnTouchStart('plus')"
      @touchend.stop.prevent="clearTimer"
    >
      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn">＋</view>
    </view>
  </view>
</template>
<script>
/* eslint-disable */
/**
 * numberBox 步进器（此为uview组件改造）
 * @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
 * @tutorial https://www.uviewui.com/components/numberBox.html
 * @property {Number} value 输入框初始值（默认1）
 * @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
 * @property {Number} min 用户可输入的最小值（默认0）
 * @property {Number} max 用户可输入的最大值（默认99999）
 * @property {Number} step 步长，每次加或减的值（默认1）
 * @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致）
 * @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
 * @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
 * @property {Boolean} positive-integer 是否只能输入正整数（默认true）
 * @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
 * @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
 * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
 * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
 * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
 * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
 * @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
 * @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
 * @event {Function} change 输入框内容发生变化时触发，对象形式
 * @event {Function} blur 输入框失去焦点时触发，对象形式
 * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
 * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
 * @example <vk-data-input-number-box :min="1" :max="100"></vk-data-input-number-box>
 */
export default {
  name: 'vk-data-input-number-box',
  emits: ['update:modelValue', 'input', 'change', 'blur', 'plus', 'minus'],
  props: {
    // 预显示的数字
    value: {
      type: Number,
      default: 1,
    },
    modelValue: {
      type: Number,
      default: 1,
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#FFFFFF',
    },
    // 最小值
    min: {
      type: Number,
      default: 0,
    },
    // 最大值
    max: {
      type: Number,
      default: 99999,
    },
    // 步进值，每次加或减的值
    step: {
      type: Number,
      default: 1,
    },
    // 步进值，首次增加或最后减的值
    stepFirst: {
      type: Number,
      default: 0,
    },
    // 是否只能输入 step 的倍数
    stepStrictly: {
      type: Boolean,
      default: false,
    },
    // 是否禁用加减操作
    disabled: {
      type: Boolean,
      default: false,
    },
    // input的字体大小，单位rpx
    size: {
      type: [Number, String],
      default: 26,
    },
    // 加减图标的颜色
    color: {
      type: String,
      default: '#323233',
    },
    // input宽度，单位rpx
    inputWidth: {
      type: [Number, String],
      default: 80,
    },
    // input高度，单位rpx
    inputHeight: {
      type: [Number, String],
      default: 50,
    },
    // index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
    index: {
      type: [Number, String],
      default: '',
    },
    // 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
    // 设置disabled为false，disabledInput为true即可
    disabledInput: {
      type: Boolean,
      default: false,
    },
    // 输入框于键盘之间的距离
    cursorSpacing: {
      type: [Number, String],
      default: 100,
    },
    // 是否开启长按连续递增或递减
    longPress: {
      type: Boolean,
      default: true,
    },
    // 开启长按触发后，每触发一次需要多久
    pressTime: {
      type: [Number, String],
      default: 250,
    },
    // 是否只能输入大于或等于0的整数(正整数)
    positiveInteger: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    valueCom(v1, v2) {
      // 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
      if (!this.changeFromInner) {
        this.inputVal = v1
        // 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
        // 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
        // 将changeFromInner设置为false
        this.$nextTick(function () {
          this.changeFromInner = false
        })
      }
    },
    inputVal(v1, v2) {
      // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
      if (v1 == '') return
      let value = 0
      // 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
      let tmp = this.isNumber(v1)
      if (tmp && v1 >= this.min && v1 <= this.max) value = v1
      else value = v2
      // 判断是否只能输入大于等于0的整数
      if (this.positiveInteger) {
        // 小于0，或者带有小数点，
        if (v1 < 0 || String(v1).indexOf('.') !== -1) {
          value = v2
          // 双向绑定input的值，必须要使用$nextTick修改显示的值
          this.$nextTick(() => {
            this.inputVal = v2
          })
        }
      }
      // 发出change事件
      this.handleChange(value, 'change')
    },
    min(v1) {
      if (v1 !== undefined && v1 != '' && this.valueCom < v1) {
        this.$emit('input', v1)
        this.$emit('update:modelValue', v1)
      }
    },
    max(v1) {
      if (v1 !== undefined && v1 != '' && this.valueCom > v1) {
        this.$emit('input', v1)
        this.$emit('update:modelValue', v1)
      }
    },
  },
  data() {
    return {
      inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
      timer: null, // 用作长按的定时器
      changeFromInner: false, // 值发生变化，是来自内部还是外部
      innerChangeTimer: null, // 内部定时器
      showInput: false,
    }
  },
  created() {
    this.inputVal = Number(this.valueCom)
  },
  computed: {
    valueCom() {
      // #ifndef VUE3
      return this.value
      // #endif
      // #ifdef VUE3
      return this.modelValue
      // #endif
    },
    getCursorSpacing() {
      // 先将值转为px单位，再转为数值
      return Number(uni.upx2px(this.cursorSpacing))
    },
  },
  methods: {
    // 空点击事件，主要用于解决PC端H5由于无click事件导致触摸位置不准确的问题
    emptyClick() {},
    // 触摸事件开始
    btnTouchStart(callback) {
      // 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
      this[callback]()
      // 如果没开启长按功能，直接返回
      if (!this.longPress) return
      clearInterval(this.timer) //再次清空定时器，防止重复注册定时器
      this.timer = null
      this.timer = setInterval(() => {
        // 执行加或减函数
        this[callback]()
      }, this.pressTime)
    },
    // 清除定时器
    clearTimer() {
      this.$nextTick(() => {
        clearInterval(this.timer)
        this.timer = null
      })
    },
    // 减
    minus() {
      this.computeVal('minus')
    },
    // 加
    plus() {
      this.computeVal('plus')
    },
    // 为了保证小数相加减出现精度溢出的问题
    calcPlus(num1, num2) {
      let baseNum, baseNum1, baseNum2
      try {
        baseNum1 = num1.toString().split('.')[1].length
      } catch (e) {
        baseNum1 = 0
      }
      try {
        baseNum2 = num2.toString().split('.')[1].length
      } catch (e) {
        baseNum2 = 0
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
      let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2 //精度
      return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision)
    },
    // 为了保证小数相加减出现精度溢出的问题
    calcMinus(num1, num2) {
      let baseNum, baseNum1, baseNum2
      try {
        baseNum1 = num1.toString().split('.')[1].length
      } catch (e) {
        baseNum1 = 0
      }
      try {
        baseNum2 = num2.toString().split('.')[1].length
      } catch (e) {
        baseNum2 = 0
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
      let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
      return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision)
    },
    computeVal(type) {
      uni.hideKeyboard()
      if (this.disabled) return
      let value = 0
      // 新增stepFirst开始
      // 减
      if (type === 'minus') {
        if (this.stepFirst > 0 && this.inputVal == this.stepFirst) {
          value = this.min
        } else {
          value = this.calcMinus(this.inputVal, this.step)
        }
      } else if (type === 'plus') {
        if (this.stepFirst > 0 && this.inputVal < this.stepFirst) {
          value = this.stepFirst
        } else {
          value = this.calcPlus(this.inputVal, this.step)
        }
      }
      if (this.stepStrictly) {
        let strictly = value % this.step
        if (strictly > 0) {
          value -= strictly
        }
      }
      if (value > this.max) {
        value = this.max
      } else if (value < this.min) {
        value = this.min
      }
      // 新增stepFirst结束
      this.inputVal = value
      this.handleChange(value, type)
    },
    // 处理用户手动输入的情况
    onBlur(event) {
      let val = 0
      let value = event.detail.value
      // 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
      // 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
      if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min
      val = +value
      // 新增stepFirst开始
      if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) {
        val = this.stepFirst
      }
      // 新增stepFirst结束
      if (this.stepStrictly) {
        let strictly = val % this.step
        if (strictly > 0) {
          val -= strictly
        }
      }
       if (val > this.max) {
        val = this.max
      } else if (val < this.min) {
        val = this.min
      }
      this.$nextTick(() => {
        this.inputVal = val
      })
      this.handleChange(val, 'blur')
    },
    handleChange(value, type) {
      if (this.disabled) return
      // 清除定时器，避免造成混乱
      if (this.innerChangeTimer) {
        clearTimeout(this.innerChangeTimer)
        this.innerChangeTimer = null
      }
      // 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
      this.changeFromInner = true
      // 一定时间内，清除changeFromInner标记，否则内部值改变后
      // 外部通过程序修改value值，将会无效
      this.innerChangeTimer = setTimeout(() => {
        this.changeFromInner = false
      }, 150)
      this.$emit('input', Number(value))
      this.$emit('update:modelValue', Number(value))
      this.$emit(type, {
        // 转为Number类型
        value: Number(value),
        index: this.index,
      })
    },
    /**
     * 验证十进制数字
     */
    isNumber(value) {
      return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
    },
  },
}
</script>
<style lang="scss" scoped>
.vk-data-input-number-box {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.u-number-input {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #f4f4f4;
  border-left: 0;
  border-right: 0;
  box-sizing: border-box;
}
.u-icon-plus,
.u-icon-minus {
  width: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid #f4f4f4;
  box-sizing: border-box;
}
.u-icon-plus {
  border-radius: 0 8rpx 8rpx 0;
}
.u-icon-minus {
  border-radius: 8rpx 0 0 8rpx;
}
.u-icon-disabled {
  color: #c8c9cc !important;
  background-color: #f2f3f5 !important;
}
.u-input-disabled {
  color: #c8c9cc !important;
  background-color: #f2f3f5 !important;
}
.num-btn {
  font-weight: 550;
  line-height: 50rpx;
}
</style>

打开弹窗设置按钮

其实就是这个SKU组件自己规定的写法

购物车模块有最终代码

列表渲染

购物车下面的猜你喜欢分页加载

要做的事情其实很简单前面已经将函数封装好了因此只需要再使用猜你喜欢的地方调用函数就好了

$event

<button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>
       
<button @tap="($event) => onDeleteCart(item.skuId)" class="button delete-button">

这两种方式在功能上是等效的，它们都会在按钮被点击时触发 onDeleteCart 方法并传递相应的参数 item.skuId。然而，它们的写法略有不同：

<button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button>：这是一种直接绑定事件处理函数的方式。当按钮被点击时，会直接调用 onDeleteCart 方法，并将 item.skuId 作为参数传递给该方法。

<button @tap="($event) => onDeleteCart(item.skuId)" class="button delete-button">删除</button>：这是一种使用箭头函数的方式。它创建了一个匿名函数，这个函数接收一个参数 $event，然后调用 onDeleteCart 方法并传递 item.skuId 作为参数。

除此之外最明显的区别应该是使用箭头函数可以在调用函数前添加使用逻辑

<button @tap="($event) => {
  if (confirm('确定要删除吗？')) {
    onDeleteCart(item.skuId)
  }
}" class="button delete-button">删除</button>

两个购物车页面

作业

购物车二猜你喜欢分页加载答案

const { guessRef, onScrolltolower } = useGuessList()
 <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="onScrolltolower"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >

底部工具栏安全区适配

不知道我写的是不是对的

<script setup lang="ts">
// 获取会员store
import {
  getMemberCartAPI,
  deleteMemberCartAPI,
  putMemberCartBySkuIdAPI,
  putMemberCartSelectedAPI,
} from '@/services/cart'
import { useMemberStore } from '@/stores'
import type { CartItem } from '@/types/cart'
import { onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { useGuessList } from '@/composables/index'
import type { InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box'
// 获取会员Store
const memberStore = useMemberStore()
// 获取购物车数据
const cartList = ref<CartItem[]>([])
const getMemberCartData = async () => {
  const res = await getMemberCartAPI()
  cartList.value = res.result
}
const { guessRef, onScrolltolower } = useGuessList()
// 点击删除 按钮
const onDeleteCart = (skuId: string) => {
  //弹窗二次
  uni.showModal({
    content: '是否删除',
    success: async (res) => {
      if (res.confirm) {
        // 删除后再查询数据
        await deleteMemberCartAPI({ ids: [skuId] })
        getMemberCartData()
      }
    },
  })
}
// 初始化调用: 页面显示触发
onShow(() => {
  // 用户已登录才允许调用
  if (memberStore.profile) {
    getMemberCartData()
  }
})
// 修改商品数量
const onChangeCount = (ev: InputNumberBoxEvent) => {
  putMemberCartBySkuIdAPI(ev.index, { count: ev.value })
}
// 修改选中状态-单品修改
const onChangeSelected = (item: CartItem) => {
  // 前端数据更新-是否选中取反
  item.selected = !item.selected
  // 后端数据更新
  putMemberCartBySkuIdAPI(item.skuId, { selected: item.selected })
}
// 计算全选状态
const isSelectedAll = computed(() => {
  return cartList.value.length && cartList.value.every((v) => v.selected)
})
// 修改选中状态-全选修改
const onChangeSelectedAll = () => {
  // 全选状态取反
  const _isSelectedAll = !isSelectedAll.value
  // 前端数据更新
  cartList.value.forEach((item) => {
    item.selected = _isSelectedAll
  })
  // 后端数据更新
  putMemberCartSelectedAPI({ selected: _isSelectedAll })
}
// 计算选中单品列表
const selectedCartList = computed(() => {
  return cartList.value.filter((v) => v.selected)
})
// 计算选中总件数
const selectedCartListCount = computed(() => {
  return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
})
// 计算选中总金额
const selectedCartListMoney = computed(() => {
  return selectedCartList.value
    .reduce((sum, item) => sum + item.count * item.nowPrice, 0)
    .toFixed(2)
})
// 结算按钮
const gotoPayment = () => {
  if (selectedCartListCount.value === 0) {
    return uni.showToast({
      icon: 'none',
      title: '请选择商品',
    })
  }
  // 跳转到结算页
  uni.navigateTo({ url: '/pagesOrder/create/create' })
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<template>
  <scroll-view
    scroll-y
    class="scroll-view"
    @scrolltolower="onScrolltolower"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <!-- 已登录: 显示购物车 -->
    <template v-if="memberStore.profile">
      <!-- 购物车列表 -->
      <view class="cart-list" v-if="cartList.length">
        <!-- 优惠提示 -->
        <view class="tips">
          <text class="label">满减</text>
          <text class="desc">满1件, 即可享受9折优惠</text>
        </view>
        <!-- 滑动操作分区 -->
        <uni-swipe-action>
          <!-- 滑动操作项 -->
          <uni-swipe-action-item v-for="item in cartList" :key="item.skuId" class="cart-swipe">
            <!-- 商品信息 -->
            <view class="goods">
              <!-- 选中状态 -->
              <text
                @tap="onChangeSelected(item)"
                class="checkbox"
                :class="{ checked: item.selected }"
              >
              </text>
              <navigator
                :url="`/pages/goods/goods?id=${item.id}`"
                hover-class="none"
                class="navigator"
              >
                <image mode="aspectFill" class="picture" :src="item.picture"></image>
                <view class="meta">
                  <view class="name ellipsis">{{ item.name }}</view>
                  <view class="attrsText ellipsis">{{ item.attrsText }}</view>
                  <view class="price">{{ item.price }}</view>
                </view>
              </navigator>
              <!-- 商品数量 -->
              <view class="count">
                <!-- 商品数量 -->
                <view class="count">
                  <vk-data-input-number-box
                    v-model="item.count"
                    :min="1"
                    :max="item.stock"
                    :index="item.skuId"
                    @change="onChangeCount"
                  />
                </view>
              </view>
            </view>
            <!-- 右侧删除按钮 -->
            <template #right>
              <view class="cart-swipe-right">
                <button @tap="($event) => onDeleteCart(item.skuId)" class="button delete-button">
                  删除
                </button>
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <!-- 购物车空状态 -->
      <view class="cart-blank" v-else>
        <image src="/static/images/blank_cart.png" class="image" />
        <text class="text">购物车还是空的，快来挑选好货吧</text>
        <navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
          <button class="button">去首页看看</button>
        </navigator>
      </view>
      <!-- 吸底工具栏 -->
      <view class="toolbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <text @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text>
        <text class="text">合计:</text>
        <text class="amount"> {{ selectedCartListMoney }}</text>
        <view class="button-grounp">
          <view
            class="button payment-button"
            :class="{ disabled: selectedCartListCount === 0 }"
            @tap="gotoPayment"
          >
            去结算({{ selectedCartListCount }})
          </view>
        </view>
      </view>
    </template>
    <!-- 未登录: 提示登录 -->
    <view class="login-blank" v-else>
      <text class="text">登录后可查看购物车中的商品</text>
      <navigator url="/pages/login/login" hover-class="none">
        <button class="button">去登录</button>
      </navigator>
    </view>
    <!-- 猜你喜欢 -->
    <XtxGuess ref="guessRef"></XtxGuess>
    <!-- 底部占位空盒子 -->
    <view class="toolbar-height"></view>
  </scroll-view>
</template>

nChangeSelectedAll" class=“all” :class=“{ checked: isSelectedAll }”>全选
合计:
{{ selectedCartListMoney }}
<view
class=“button payment-button”
:class=“{ disabled: selectedCartListCount === 0 }”
@tap=“gotoPayment”
>
去结算({{ selectedCartListCount }})

登录后可查看购物车中的商品

去登录

黑马程序员uni-app 小兔鲜儿项目及bug记录（下） Day 5（有作业）

黑马程序员uni-app 小兔鲜儿项目及bug记录（下） Day 5

Day 5

地址模块

为什么会有ev.detail.value而不是ev.value

地址列表渲染

修改地址模块

使用uniapp校验表单

第一步定义校验规则

第二步更改原本的标签

SKU模块

SKU模块大bug

打开弹窗设置按钮

购物车模块有最终代码

列表渲染

购物车下面的猜你喜欢分页加载

$event

两个购物车页面

作业

购物车二猜你喜欢分页加载答案

底部工具栏安全区适配

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

黑马程序员uni-app 小兔鲜儿 项目及bug记录（下） Day 5（有作业）

黑马程序员uni-app 小兔鲜儿 项目及bug记录（下） Day 5

Day 5

地址模块

为什么会有ev.detail.value而不是ev.value

地址列表渲染

修改地址模块

使用uniapp校验表单

第一步 定义校验规则

第二步 更改原本的标签

SKU模块

SKU模块大bug

打开弹窗设置按钮

购物车模块 有最终代码

列表渲染

购物车下面的猜你喜欢分页加载

$event

两个购物车页面

作业

购物车二 猜你喜欢分页加载 答案

底部工具栏安全区适配

热门文章

最新文章

相关课程

相关电子书

相关实验场景

黑马程序员uni-app 小兔鲜儿项目及bug记录（下） Day 5（有作业）

黑马程序员uni-app 小兔鲜儿项目及bug记录（下） Day 5

第一步定义校验规则

第二步更改原本的标签

购物车模块有最终代码

购物车二猜你喜欢分页加载答案