想给轮播图每张图都加跳转功能,搜到网上给的示例都是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"}
],
}
模拟器的显示:
问题已解决!不需要动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>
navigator{
width: *****;
image {
width: *****;
}
}
样式里写点样式应该就可以解决