左右滑动swiper

谁践踏了优雅 2022-06-01 11:58 324阅读 0赞

转自：http://blog.csdn.net/xieshunhai/article/details/72830938

.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  
   \*/  
\})