微信小程序页签切换

最新推荐文章于 2024-08-16 08:13:55 发布

sea_r

最新推荐文章于 2024-08-16 08:13:55 发布

阅读量2.4k

点赞数 5

分类专栏：微信小程序开发

本文链接：https://blog.csdn.net/sea_r/article/details/96607728

版权

微信小程序开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小程序页签滑动切换

界面展示

在这里插入图片描述

wxml部分

<view class='content'>
  <view class='log'>
    <view class="{{currentTab==0?'selected':'default'}}" data-current="0" bindtap='switchNav'>
      商城
    </view>
    <view class="{{currentTab==1?'selected':'default'}}" data-current="1" bindtap='switchNav'>
      公益
    </view>
    <view class="{{currentTab==2?'selected':'default'}}" data-current="2" bindtap='switchNav'>
      获取
    </view>
  </view>
  <swiper current='{{currentTab}}' style='height:{{winHeight}}px' bindchange='bindChange'>
    <swiper-item>
      <view>我是商城区域</view>
    </swiper-item>
    <swiper-item>
      <view>
        我是公益区域
      </view>
    </swiper-item>
    <swiper-item>
      <view>
        我是获取区域
      </view>
    </swiper-item>
  </swiper>
  </view>

wxss部分

.log
{
  display: flex;
  flex-direction:row;
  width: 100%;
}
.selected
{
  font-size: 15px;
  color: rgb(102, 165, 112);
  width: 33%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 5rpx solid rgb(102, 165, 112);
}
.default
{
  font-size: 15px;
  margin: 0 auto;
  padding: 15px;
}
.content
{
  position: absolute;
  top: 45%;
  width: 100%;
}

js部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0,
    winWidth: 0,
    winHeight: 0
  },
  switchNav: function (e) {
    var page = this;
    if (this.data.currentTab == e.target.dataset.current) {
      return false;
    }
    else {
      page.setData({ currentTab: e.target.dataset.current });
    }
  },
  bindChange: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var page = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        page.setData({ winWidth: res.windowWidth });
        page.setData({ winHeight: res.windowHeight });
      },
    })
  }
})