小程序

小程序

• tab内容区左右滑动切换时，tab标题随即做标记（active）
• 当active的标题不在当前屏显示时，要使其能显示到当前屏中

tab内容

• 设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
• swiper组件的current组件用于控制当前显示哪一页
• swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

<view>
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab==0? 'active' : ''}}" data-current="0" bindtap="switchNav">
      首页1
    </view>
    <view class="tab-item {{currentTab==1? 'active' : ''}}" data-current="1" bindtap="switchNav">
      首页2
    </view>
    <view class="tab-item {{currentTab==2? 'active' : ''}}" data-current="2" bindtap="switchNav">
      首页3
    </view>
  </scroll-view>
  <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
    <swiper-item>
      <scroll-view scroll-y="true" class="scoll-h">
        111
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y="true" class="scoll-h">
        222
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y="true" class="scoll-h">
        333
      </scroll-view>
    </swiper-item>

  </swiper>

</view>

// pages/d/d.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    winHeight: '', //窗口高度
    currentTab: 0, //预设当前项的值
    scrollLeft: 0 //tab标题的滚动条位置
  },

  // 滚动切换标签样式

  switchTab: function(e) {
    this.setData({
      currentTab: e.detail.current
    });
    this.checkCor();
  },

  // 点击标题切换当前页时改变样式
  switchNav: function(e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },

  // 判断当前滚动超过一屏时，设置tab标题滚动条

  checkCor: function() {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },





  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;

    // 高度自适应
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 180;
        console.log(calc)

        that.setData({
          winHeight: calc
        });
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

/* pages/d/d.wxss */

.tab-h{
    height: 57rpx;
    width: 100%;
    line-height: 51rpx;
    background: #fff;
    font-size: 16px;
    white-space: nowrap;
    z-index: 99;
    margin-top: 20px;
}

.tab-item {
    margin: 0 20rpx;
    display: inline-block;
    color: #777;
    width: 14.5%;
    text-align: center;
    font-size: 26rpx;
    

}
.tab-item.active {
    color: #000;
    position: relative;
    border-bottom: 3px solid #000;
}
.item-ans {
    width: 100%;
    display: flex;
    flex-grow: row no-wrap;
    justify-content: space-between;
    padding: 30rpx;
    box-sizing: border-box;
    height: 180rpx;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
}
.avatar {
    width: 100rpx;
    height: 100rpx;
    position: relative;
    padding-right: 30rpx;
}
.avatar img{
    width: 100%;
    height: 100%;
}

.avarar .doyen {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    bottom: -2rpx;right: 20rpx;
}

.expertInfo{
    font-size: 12px;
    flex-grow: 2;
    color: #b0b0b0;
    line-height: 1.5em;
}
.expertInfo .name{
    font-size: 16px;
    color: #000;
    margin-bottom: 6px;
}

.askBtn {
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 14px;
    border-radius: 60rpx;
    border: 1px solid #4675f9;
    color: #4675f9;
}

.tab-content {
    margin-top: 80rpx;
}

.scoll-h{
    height: 100%;
}