위챗 애플릿: 탭 페이지 전환

2044 단어

1. 기능 설명


같은 페이지에서 서로 다른 전시 페이지의 전환 기능을 실현하다. 아래 그림과 같다.
 

2. 코드 구현


1. index.js
Page({

  /**
   *  
   */
  data: {
      currentData : 0,
  },
  /**
   *  -- 
   */
  onLoad: function (options) {
  },
  // index
  bindchange:function(e){
    const that  = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  // , index 
  checkCurrent:function(e){
    const that = this;

    if (that.data.currentData === e.target.dataset.current){
        return false;
    }else{

      that.setData({
        currentData: e.target.dataset.current
      })
    }
  }
})

  
  
2. index.wxml

     
     
     


  welcome come to   
  welcome come to  
  welcome come to    


  
3. index.wxss
.tab {
  float: left;
  width: 33.3333%;
  text-align: center;
  padding: 10rpx 0;
}

.topTabSwiper {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  zoom: 1;
}

.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}

.tabBorer {
  border-bottom: 1px solid #f00;
  color: #f00;
}

.swiper {
  width: 100%;
}

.swiper_con {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 80rpx 0;
}

  
다음으로 전송:https://www.cnblogs.com/huiAlex/p/9462918.html

좋은 웹페이지 즐겨찾기