我的活动日程小程序页面（导航切换）

1.wxml代码如下

<!--导航切换 -->
<view class='top-bg'>
  <view class="swiper-tab">
    <view class="swiper-tab-list {{current == index ? 'change': ' '}}" wx:for="{{title}}" data-index="{{index}}" bindtap='change'>{{item}}
    </view>
  </view>
</view>

<swiper current="{{current}}" bindchange='swiperChange' duration="300" style="height:{{winHeight}}px">
  <swiper-item wx:for="{{order}}">
    <!-- 切换内容s -->
    <scroll-view class='scroll-view' scroll-y="true" style="height:{{winHeight-50}}px">
    <view class='tab-nav'>
      <view class='time'>上午</view>
      <view class='tab-style'>
        <view class='tab-con'>
          <view class='tab-con-time'>
            <view class='time1'>9:00</view>
            <view class='time1'>﹀</view>
            <view class='time1'>11:30</view>
          </view>
          <view class='tab-con-detailed'>
            <view class='tab-con-text'>培训：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>机构：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>地点：XXXXXXXXXXXXX</view>
          </view>
        </view>
        <view class='tab-con'>
          <view class='tab-con-time'>
            <view class='time1'>9:00</view>
            <view class='time1'>﹀</view>
            <view class='time1'>11:30</view>
          </view>
          <view class='tab-con-detailed'>
            <view class='tab-con-text'>培训：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>机构：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>地点：XXXXXXXXXXXXX</view>
          </view>
        </view>
      </view>
    </view>

    <view class='tab-nav'>
      <view class='time'>下午</view>
      <view class='tab-style'>
        <view class='tab-con'>
          <view class='tab-con-time'>
            <view class='time1'>13:00</view>
            <view class='time1'>﹀</view>
            <view class='time1'>15:00</view>
          </view>
          <view class='tab-con-detailed'>
            <view class='tab-con-text'>培训：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>机构：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>地点：XXXXXXXXXXXXX</view>
          </view>
        </view>
        <view class='tab-con'>
          <view class='tab-con-time'>
            <view class='time1'>16:00</view>
            <view class='time1'>﹀</view>
            <view class='time1'>18:00</view>
          </view>
          <view class='tab-con-detailed'>
            <view class='tab-con-text'>培训：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>机构：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>地点：XXXXXXXXXXXXX</view>
          </view>
        </view>
      </view>
    </view>
    <view class='tab-nav'>
      <view class='time'>晚上</view>
      <view class='tab-style'>
        <view class='tab-con'>
          <view class='tab-con-time'>
            <view class='time1'>13:00</view>
            <view class='time1'>﹀</view>
            <view class='time1'>15:00</view>
          </view>
          <view class='tab-con-detailed'>
            <view class='tab-con-text'>培训：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>机构：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>地点：XXXXXXXXXXXXX</view>
          </view>
        </view>
        <view class='tab-con'>
          <view class='tab-con-time'>
            <view class='time1'>16:00</view>
            <view class='time1'>﹀</view>
            <view class='time1'>18:00</view>
          </view>
          <view class='tab-con-detailed'>
            <view class='tab-con-text'>培训：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>机构：XXXXXXXXXXXXX</view>
            <view class='tab-con-text'>地点：XXXXXXXXXXXXX</view>
          </view>
        </view>
      </view>
    </view>
    </scroll-view>
    <!-- 切换内容e -->
  </swiper-item>

</swiper>

2.wxss代码如下

page{
  background: #f2f2f2;
}
/* -----导航切换s -----*/

.top-bg {
  background-color: #3891f8;
  position:fixed; 
  top:0;
  width: 100%;
  z-index: 999;
}

.swiper-tab {
  display: flex;
  text-align: center;
  color: #fff;
  font-size: 12px;
  width: 95%;
  height: 80rpx;
  line-height: 80rpx;
  margin: 0 auto;
}

.swiper-tab-list {
  flex: 1;
}

.change {
  background: #f2f2f2;
  color: rgb(51, 51, 51);
}

/* -----导航切换e -----*/
/* 切换内容s */
.scroll-view{
  margin-top: 100rpx;
}
.tab-nav{
  width: 95%;
  margin: 0 auto;
}
.tab-style{
  border-radius: 5px;
  background: #fff;
}
.time{
  text-align: center;
  font-size: 14px;
}
.tab-con{
  display: flex;
  padding: 5px 0px;
  border-top: 1px solid #f2f2f2;
}
.tab-con-time{
  width: 200rpx;
  font-size: 14px;
}
.tab-con-time .time1{
  text-align: center;
}
.tab-con-detailed{
}
.tab-con-text{
  font-size: 14px;
}
/* 切换内容e */

3.js如下

var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    BaseURL: app.globalData.BaseURL, //图片后台
    title: ["今", "一", "二", "三", "四", "五", "六"],
    current: 0,
    index: 0,
    id: 0,
    order: [1, 2, 3, 4,5,6,7]
  },

  change: function (e) {
    this.setData({
      current: e.currentTarget.dataset.index,
    })
  },
  swiperChange(e) {
    let current = e.detail.current;
    this.setData({
      current: current,
    })
    console.log(current)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 获取系统信息 
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

4.效果图如下