微信小程序实现轮点击选项卡切换页面的操作

微信小程序实现点击选项卡切换页面的操作

演示效果图

废话没有直接代码：
wxhl

<!--pages/index/index.wxml-->
<view class="menu"> 
  <navigator wx:for="{{shouye}}"bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator>
</view>
<swiper current='{{page}}' bindchange="changepage">
  <swiper-item wx:for="{{shouye}}">
    <view class="view1">{{item}}</view>
  </swiper-item>
</swiper>

wxss

/* pages/index/index.wxss */
scroll-view{
  width: 100%;
  height: 100%;
  display: flex;
}
.menu{
  background-color: red;
  display: flex;
  height: 60rpx;
  font-size: 40rpx;
  line-height: 70rpx;
  flex-direction: row;
  justify-content: space-around;
  
}
.font-white{
  border-bottom: 5rpx solid black;
  font-weight: bold;
}
.font-black{
}
.view1{
  height: 100%;
}

js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    shouye: ['首页', '日程', '闹钟', '课程', '娱乐'],
    page: 0
  },
  change: function (event) {
    var a = event.currentTarget.dataset.pageid
    this.setData({
      page: a
    })
  },
  changepage: function (event) {
    console.log(event)
    var a = event.detail.current
    this.setData({
      page: a
    })
  }

这个方法可以实现基本的切换，但是存在一个问题就是它的页面无法自适应。这是由于swiper的最大高度固定为150px成的。目前来说解决这个问题的最好方法只有用js来判断屏幕的高度然后利用函数来改变高度实现自适应高度。