微信小程序仿今日頭條nav（可滑動頁面切換tab）

廢話不多說，直接上代碼：

1. wxml 

 
  <view class="navigation">
    <scroll-view scroll-x="true" class="nav-scroll" scroll-left="{{scrollLeft}}">
      <block wx:for="{{navigation}}" wx:key="index">
        <view id="{{index}}" bindtap="navHandler" class="nav-item nav-item-{{index}} {{index == selectedTitle ? 'active' : ''}}">
        {{item.name}}
        </view>
      </block>
    </scroll-view>
  </view>
  
  <swiper bindchange="bindChange" current='{{selectedTitle}}' duration="200" style="height:{{swiperHeight}}rpx">

    <block wx:for="{{dataList}}" wx:key="index">
      <swiper-item id="current_{{index}}">
        <scroll-view scroll-y="true" scroll-top="{{scrollTop}}"  bindscrolltolower="scrollHanler" style="height: 100%;">
          <view class="container">
            <view>{{item.one}}</view>
          </view>
        </scroll-view>
      </swiper-item>
    </block>

  </swiper>

 

2. wxss

page {
  height: 100%;
}
page .navigation {
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 36px;
  background: #F7F7F7;
  display: flex;
  justify-content: space-around;
}
page .navigation .nav-scroll {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #F7F7F7;
  font-size: 14px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
page .navigation .nav-scroll .nav-item {
  margin: 0 36rpx;
  display: inline-block;
}
page .navigation .nav-scroll .nav-item.active {
  color: #FF4339;
  font-size: 34rpx;
  font-weight: 500;
  position: relative;
}
page .navigation .nav-scroll .nav-item::after {
  content: "";
  display: block;
  height: 8rpx;
  border-radius: 6rpx;
  width: 100%;
  background: #FF4339;
  position: absolute;
  bottom: 0;
  left: 0;
}
page .container {
  height: 100%;
  padding: 95rpx 30rpx 0;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #000;
}
page .container view {
  line-height: 80rpx;
  word-break: break-all;
}

 

3. js

var app = getApp()
Page({
  data: {
    swiperHeight: "",
    scrollLeft: 0,
    navigation: [
      { id: 0, name: "推薦" },
      { id: 1, name: "關注" },
      { id: 2, name: "穿搭" },
      { id: 3, name: "美食" },
      { id: 4, name: "美妝" },
      { id: 5, name: "珠寶" },
      { id: 6, name: "百貨" },
      { id: 7, name: "其他" }
    ],
    selectedTitle: "0",   // 導航選中項
    scrollTop:0,
    dataList:[
      { "one": '開始第一頁第一頁第一頁第一頁第一頁第一頁第一頁第一頁第一頁第一頁第一頁第一頁結束'},
      { "one": '開始第二頁第二頁第二頁第二頁第二頁第二頁第二頁第二頁第二頁第二頁第二頁第二頁第二頁結束' },
      { "one": '開始第三頁第三頁第三頁第三頁第三頁第三頁第三頁第三頁第三頁第三頁第三頁第三頁第三頁結束' },
      { "one": '開始第四頁第四頁第四頁第四頁第四頁第四頁第四頁第四頁第四頁第四頁第四頁第四頁第四頁結束' },
      { "one": '開始第五頁第五頁第五頁第五頁第五頁第五頁第五頁第五頁第五頁第五頁第五頁第五頁第五頁結束' },
      { "one": '開始第六頁第六頁第六頁第六頁第六頁第六頁第六頁第六頁第六頁第六頁第六頁第六頁第六頁結束' },
      { "one": '開始第七頁第七頁第七頁第七頁第七頁第七頁第七頁第七頁第七頁第七頁第七頁第七頁第七頁結束' },
      { "one": '開始第八頁第八頁第八頁第八頁第八頁第八頁第八頁第八頁第八頁第八頁第八頁第八頁第八頁結束' }
    ],
    pagenum: 1,     // 分頁
  },

  // 導航點擊
  navHandler: function (e) {
    this.setData({
      selectedTitle: e.currentTarget.id
    });
  },

  // 頁面滑動
  bindChange: function (e) {
    let that = this;
    wx.createSelectorQuery().select('.nav-item-' + e.detail.current).boundingClientRect(
      function (rect) {
        wx.getSystemInfo({
          success: function (res) {
            wx.createSelectorQuery().select('.nav-scroll').scrollOffset(function (scroll) {
              that.setData({
                scrollLeft: scroll.scrollLeft + (rect.width / 2) + rect.left - ( res.windowWidth / 2),
                selectedTitle: e.detail.current,
                scrollTop: 0,     // 滾動條回到頂部
              });
            }).exec()
          }
        })
      }
    ).exec()
  },

  // scroll-view 的 觸底 加載更多內容
  scrollHanler:function(){
    console.log('觸底')
    var that = this;
    var pagenum = that.data.pagenum + 1; //獲取當前頁數並+1
    that.setData({
      pagenum: pagenum, //更新當前頁數
    })
    that.getdatalist();//重新調用請求獲取下一頁數據
  },

  // 加載更多數據
  getdatalist: function () {
    let that = this;
    let data = '我是新數據數哈哈哈哈'
    let index = that.data.selectedTitle;
    let oldData = that.data.dataList[index]['one']; //從data獲取當前datalist數組
    let newData = data; //從此次請求返回的數據中獲取新數組
    let newStr = oldData.concat(newData); //合並數組
    that.setData({
      ['dataList[' + index + '].one']: newStr //合並后更新datalist
    })
  },

  //  生命周期函數--監聽頁面初次渲染完成
  onReady: function () {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          swiperHeight: res.windowHeight * 2
        });
      }
    })
  }

});

 

4.看效果