微信小程序 swiper 点击切换，左右滑动，自动滑动，源码下载

已解决不同页面不同高度

已解决卡死问题

.wxml

  红色
  绿色
  黄色



 
   
      红色内容
   
   
      绿色内容
   
   
      黑色内容
   
 

 

.wxss

.swiper-tab {
  width: 100%;
  border-bottom: 1px solid #777;
  text-align: center;
  line-height: 40px;
  background-color: #fff;
}


.swiper-tab-list {
  font-size: 13px;
  display: inline-block;
  width: 33.3%;
  color: #777;
}
.on {
  color: #FFF;
  background-color: #528dc3;
  border-top:5rpx solid #528dc3;
  border-bottom:5rpx solid #528dc3;
}


.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}


.swiper-box view {
  text-align: center;
}

 

.js

Page({
  data: {
    currentTab: '',
  },
  /*** 滑动切换tab***/
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  /*** 点击tab切换***/
  swichNav: function (e) {
    var that = this;
    that.setData({
      currentTab: e.target.dataset.current
    });
  },
  /*
    onshow
   */
})

 

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

效果如图

 

 

本文纯属原创

最后附上源码：https://www.ddkblog.top/article/detail/22

有兴趣的可以看下我的微信小程序