微信小程序仿今日头条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.看效果