收藏
回答

swiper组件报错Do not set same key object in wx:key?

swiper组件设置wx:key="*this",报错VM2484:1 Do not set same key \"[object Object]\" in wx:key.

请教代码该怎么改?谢谢

wxml:

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}" style="background: url({{item.swiperImg}})"></view>
          </swiper-item>
        </block>
      </swiper>
    </view> 
  </view>
</view>

JS:

data: {
    background: [{"swiperImg":"https://qiniu-image.qtshe.com/1536067857379_122.png"},{"swiperImg":"https://qiniu-image.qtshe.com/1536068379879_115.png"},{"swiperImg":"https://qiniu-image.qtshe.com/1536068319939_230.png"}],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
}
回答关注问题邀请回答
收藏

1 个回答

  • 唐同学
    唐同学
    2020-05-19

    改了一下,初步测试没有问题,请各位大佬拍砖。

    wxml:

    <view class="container">
      <view class="page-body">
        <view class="page-section page-section-spacing swiper">
          <swiper indicator-dots="{{indicatorDots}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{background}}" wx:key="index">
              <swiper-item>
                <view class="swiper-item swiper-item-{{index}}" style="background: url({{item.swiperImg}})"></view>
              </swiper-item>
            </block>
          </swiper>
        </view> 
      </view>
    </view>
    

    JS:

    data: {
        background: [{"swiperImg":"https://qiniu-image.qtshe.com/1536067857379_122.png"},{"swiperImg":"https://qiniu-image.qtshe.com/1536068379879_115.png"},{"swiperImg":"https://qiniu-image.qtshe.com/1536068319939_230.png"}],
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 2000,
        duration: 500
    }
    

    wxss:

    .swiper-item-1{
      position: relative;
      align-items: center;
      justify-content: center;
      background-size100%;
      color#FFFFFF;
      font-size36rpx;
    }
    .swiper-item-1:before{
      content'A';
      position: absolute;
      top50%;
      left50%;
      transformtranslate(-50%, -50%);
    }
    .swiper-item-2{
      position: relative;
      align-items: center;
      justify-content: center;
      background-color#2782D7;
      color#FFFFFF;
      font-size36rpx;
    }
    .swiper-item-2:before{
      content'B';
      position: absolute;
      top50%;
      left50%;
      transformtranslate(-50%, -50%);
    }
    .swiper-item-3{
      position: relative;
      align-items: center;
      justify-content: center;
      background-color#F1F1F1;
      color#353535;
      font-size36rpx;
    }
    .swiper-item-3:before{
      content'C';
      position: absolute;
      top50%;
      left50%;
      transformtranslate(-50%, -50%);
    }
    


    2020-05-19
    有用 2
    回复
登录 后发表内容
问题标签