微信小程序導航欄,下面內容滑動,上冊導航欄跟着滑動,內容隨着導航欄滑動


16.類似微信導航欄滑動.png
今日頭條導航欄,下面滑動上面跟着滑動

  • index.wxml
<swiper class="content"
 style="height:{{height}}px"
 bindchange="change"
 current-item-id="{{docid}}"
 duration="100"
 >  
  <swiper-item data-key="{{item.id}}"
  wx:for="{{title}}"
  wx:key="index"
  item-id="{{item.id}}">
  • index.js
//bindchange事件
change:function(){
    // 獲取當前索引
    var index = e.detail.current;
    // 51是每個導航的寬度,240是scroll-view的寬度 滾動條所有的距離-240
    if (index * 51 > 240 && index * 51 < 561) {
      this.setData({ left: 51 * (index - 3) })
    } else if (index * 51 < 240) {
      this.setData({ left: 0 })
    } else if (index * 51 > 561) {
      this.setData({ left: 51 * (index - 1) })
    }
    var that = this;
    var docid = e.detail.currentItemId;
    this.setData({ docid: docid })
    var title = that.data.title;
    for (let i = 0; i < that.data.title.length; i++) {
      if (title[i].id == docid) {
        that.setData({ current: title[i].key });
      }
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM