微信小程序通过点击轮播图跳转tab（navigator+swiper）_微信小程序点击图片跳转到tab页面

效果展示：

HTML

<view class="slides">
    <swiper autoplay indicator-dots circular>
      <swiper-item wx:for="{{swiperList}}" wx:key="index">
        <navigator url="{{item.imgUrl}}" open-type="switchTab" hover-class="other-navigator-hover">
          <image mode="widthFix" src="{{item.imgSrc}}" ></image>
        </navigator>
      </swiper-item>
    </swiper>
</view>
1
2
3
4
5
6
7
8
9

JS

Page({
  data: {
    swiperList:[],
  },
  getSwiper(){
     let that = this;
      wx.request({
        url:"xxx",
        success(res){
          console.log("res")
          if(res.data.code===0){
            that.setData({
              swiperList:res.data.data.swiperList
            })
          }
        },
        fail(res){
          console.log("res")
          //假数据
          let swiperList = [
            {imgSrc:"./img/1.png",//图片路径
            imgUrl:"../more/more"//跳转页面路径
            },
            {imgSrc:"./img/2.png",
            imgUrl:"../search/search"
            }
          ]
          that.setData ({
            swiperList:swiperList
          }) 
        }       
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSwiper()
 
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

可供参考文件
swiper的参数官方文档
navigator的参数官方文档