小程序规格选择弹窗，默认显示选中的规格，点击切换别的规格，踩过的坑，分享下经验！

最新推荐文章于 2024-07-10 21:32:33 发布

�MFL

最新推荐文章于 2024-07-10 21:32:33 发布

阅读量1.6k

点赞数 1

分类专栏：小程序商品详情属性选择文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/mafeilong618/article/details/107110114

版权

本文分享了在小程序中实现规格选择弹窗的经验，包括如何默认显示选中的规格，并允许用户点击切换不同规格时遇到的问题及解决办法，主要涉及JavaScript和CSS技术。

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

//html
  <view class="show-popup" hidden="{
   {hideShopPopup}}">
    <view class="popup-mask" bindtap="closePopupTap"></view>
    <view class="popup-contents">
      <view class="pop-goods-info">
        <view class="pop-img-box">
          <image src="https://shop.linkeddream.com{
   {goodList.showimages[0]}}" class="goods-thumbnail" />
        </view>
        <view class="pop-goods-des">
          <view class="pop-goods-title">{
   {
   goodList.name}}</view>
          <view class="pop-goods-price">¥ {
   {
   skushownewprice}} 库存{
   {
   skushowstock}}件</view>
          <!-- <view class="pop-goods-price" wx:if="{
   {shopType =='pingtuan'}}">¥ {
   {
   selectptPrice}}</view> -->
        </view>
        <view class="pop-goods-close" bindtap="closePopupTap"></view>
      </view>
      <view class="size-label-box">
        <block wx:for="{
   {goodList.showsku}}" wx:for-item="property" wx:for-index="idx" wx:key="id">
          <view class="label">{
   {
   property.name}}</view>
          <view class="label-item-box">
            <view wx:for="{
   {property.values}}" class="label-item {
   {item.active ? 'active' : '' }}"  wx:key="id" bindtap="labelItemTap" data-propertyindex="{
   {idx}}" data-propertyid="{
   {property.id}}" data-propertyname="{
   {property.name}}" data-propertychildindex="{
   {index}}"
              data-propertychildid="{
   {item.id}}" data-propertychildname="{
   {item.name}}">
              <!-- 这里踩过一次坑，代码写的没有问题，然后鼠标点击后一直不显示选中的高亮，折腾了大半天才发现在js中循环遍历添加完状态后，没有重新去给数组赋值setData -->
              {
   {
   item.name}}
            </view>
          </view>
        </block>
      </view>
      <view class="buy-num-box">
        <view class="num-label">购买数量</view>
        <view class="num-box">
          <view class="num-jian {
   {buyNumber == buyNumMin ? 'hui': ''}}" bindtap="numJianTap">-</view>
          <view class="num-input">
            <input type="number" value="{
   {buyNumber}}" disabled/>
          </view>
          <view class="num-jia {
   {buyNumber== buyNumMax ? 'hui': ''}}" bindtap="numJiaTap">+</view>
        </view>
      </view>
      <v

最低0.47元/天解锁文章