小程序的商品规格选择

大灰狼吃小白兔

于 2019-12-03 17:48:30 发布

阅读量4.8k

点赞数

分类专栏：小程序文章标签：商品规格选择

本文链接：https://blog.youkuaiyun.com/weixin_44268473/article/details/103372888

版权

本文介绍了如何在小程序中使用radio-group组件实现多层级商品规格的选择。通过将规格数据结构化并封装成组件，每个规格层作为独立的radio-group，确保选择互不影响。当用户完成所有规格选择时，更新商品信息；未完全选择时，提示用户继续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序radio-group实现选择多层级商品规格

效果：（当用户没有选择完所有规格，则提示用户选择其他规格。当用户选择完所有规格，则更新当前规格信息）
在这里插入图片描述

实现思路：
最好是把弹窗内的内容封装成一个组件，我这儿就是封装成的一个组件。
把你拿到的数据渲染显示在页面上，每一层规格为一个独立的radio-group，给单选框组的value绑定不一样的值，这样每组之间互不影响。

index.wxml

		<van-card custom-class="van-card-bg" price="{
    {price}}" desc="{
    {selling_intro}}" thumb="{
    { img_path }}" curSpec="{
    {curSpec}}"/>
          <!-- 规格列表 -->
          <van-cell wx:for-item="specitem" wx:key="index" wx:for="{
    {specList}}" title="{
    {specitem.specName}}" value="" border="{
    { false }}" use-label-slot="{
    {true}}">
            <view slot="label">
              <van-radio-group value="{
    { specArray[index] }}" data-specId="{
    {specitem.specId}}" data-index="{
    {index}}"  bind:change="onChangeSpec">

最低0.47元/天解锁文章