收藏
回答

swiper加上navigator后图片不显示 如何解决?

想给轮播图每张图都加跳转功能,搜到网上给的示例都是swiper+navigator+image标签嵌套,但是我写出来的图片无法显示(但下面的小圆点是有显示的),且跳转也不起作用。只要去掉navigator标签轮播图就正常显示正常轮播,加了之后图片就不显示了。请问怎么解决呢?

wxml:

 <view class="swiperBanner">
    <swiper indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" 
circular="true" autoplay="true" interval="5000" previous-margin="70rpx" next-margin="50rpx">      
      <swiper-item wx:for="{{banner}}" wx:key="index">
        <navigator url="{{item.imgUrl}}">
        <image class="bannerImage" src="{{item.imgSrc}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>


js:

data: {
    banner:[
     {imgSrc:"/images/temp.png",
      imgUrl:"/pages/knowledge/temperature/temperature"} ,
     {imgSrc:"/images/storage.jpg",
     imgUrl:"/pages/knowledge/storage/storage"},
     {imgSrc:"/images/color.jpg",
     imgUrl:"/pages/knowledge/colors/colors"},
     {imgSrc:"/images/chinchin.jpg",
     imgUrl:"/pages/knowledge/chinchin/chinchin"}
    ],
}


模拟器的显示:


回答关注问题邀请回答
收藏

2 个回答

  • lisa
    lisa
    2021-06-16

    问题已解决!不需要动js,wxml把navigator加在swiper-item外层就好了,我个人感觉不是很符合我的逻辑,但这样解决了问题就好哈哈!我发现目前没人提供这个问题的解决方法,所以不删帖了,我自己来解答一下,给遇到同样问题的小伙伴提供参考。

      <view class="swiperBanner">
        <swiper indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular="true" autoplay="true" interval="5000" previous-margin="70rpx" next-margin="50rpx">
          <navigator wx:for="{{banner}}" wx:key="index" url="{{item.imgUrl}}">
            <swiper-item>
              <image class="bannerImage" src="{{item.imgSrc}}" ></image>
            </swiper-item>
          </navigator>
        </swiper>
      </view>
    
    2021-06-16
    有用 1
    回复
  • mi
    mi
    2021-09-04

     navigator{

          width: *****;

          image {

            width: *****;

          }

        }

    样式里写点样式应该就可以解决

    2021-09-04
    有用
    回复
登录 后发表内容