uniapp 点击轮播图跳转商品详情页面

最新推荐文章于 2025-01-29 19:30:50 发布

湛海不过深蓝

最新推荐文章于 2025-01-29 19:30:50 发布

阅读量3.1k

点赞数 1

分类专栏： uniapp 文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/bbt953/article/details/124602246

版权

uniapp 专栏收录该内容

6 篇文章

订阅专栏

view组件不能跳转，navigator可以，所以要把view换成navigator

原来的

<!-- 轮播图区域 -->
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
  <swiper-item v-for="(item,i) in swiperList" :key="i">
    <view class="swiper-item">
      <image :src="item.image_src" mode=""></image>
    </view>
  </swiper-item>
</swiper>

可跳转详情页的

<!-- 轮播图区域 -->
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
   <swiper-item v-for="(item,i) in swiperList" :key="i">
     <!-- 通过商品id进行跳转 -->
     <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id-' + item.goods_id">
       <image :src="item.image_src" mode=""></image>
     </navigator>
   </swiper-item>
 </swiper>