微信小程序顶部滑动导航栏tab栏选项卡切换之四栏切换滑动制作

今天给大家带来微信小程序顶部滑动导航栏tab栏选项卡切换之四栏切换滑动制作，主要四栏进行切换滑动。制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/follow/follow.wxml-->
<view class='container'>
  <view class='top'>
    <view class="tab  {{deskIndex==0?'active':''}}" data-index='{{0}}' catchtap='changeTab'>我的关注</view>
    <view class="tab  {{deskIndex==1?'active':''}}" data-index='{{1}}' catchtap='changeTab'>我的粉丝</view>
    <view class="tab  {{deskIndex==2?'active':''}}" data-index='{{2}}' catchtap='changeTab'>我的约茶</view>
    <view class="tab  {{deskIndex==3?'active':''}}" data-index='{{3}}' catchtap='changeTab'>我的邀约</view>
  </view>

  <swiper class='seiperTab' current="{{currentIndex}}" indicator-dots="{{false}}" bindchange="bindchange">
    <!--我的关注-->
    <swiper-item>
      <scroll-view class='scroll' scroll-y>
        <block wx:for="{{myCare}}">
          <view class='people'>
            <image src='{{item.userHead}}' class='headimg'></image>
            <view class='vip'>V</view>
            <view class='per-info'>
              <view class='name'>{{item.name}}
                <text style='margin-left:15rpx; font-size:28rpx'>{{item.position}}</text>
              </view>
              <view class='company'>{{item.company}}</view>
              <view class='less'>{{item.less}}</view>
            </view>
            <view class='care' catchtap='care'>
              <block wx:if="{{item.care==0}}">
                <image src='../images/care-img.png' style='width:24rpx;height:16rpx;margin-right:5rpx'></image>
                <view class=''>互相关注</view>
              </block>
              <block wx:if="{{item.care==1}}">
                <image src='../images/gou.png' style='width:24rpx;height:16rpx;margin-right:5rpx'></image>
                <view class=''>已关注</view>
              </block>
            </view>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
    <!--我的粉丝-->
    <swiper-item>
      <scroll-view class='scroll' scroll-y>
        <block wx:for="{{myFans}}">
          <view class='people'>
            <image src='{{item.userHead}}' class='headimg'></image>
            <view class='vip'>V</view>
            <view class='per-info'>
              <view class='name'>{{item.name}}
                <text style='margin-left:15rpx; font-size:28rpx'>{{item.position}}</text>
              </view>
              <view class='company'>{{item.company}}</view>
              <view class='less'>{{item.less}}</view>
            </view>
            <view class="care {{item.care==0?'careActive':''}}">
              <block wx:if="{{item.care==0}}">
                <view class='' style='color:#409EFF' catchtap='fans'>+ 关注</view>
              </block>
              <block wx:if="{{item.care==1}}">
                <image src='../images/gou.png' style='width:22rpx;height:16rpx;margin-right:5rpx'></image>
                <view class=''>已关注</view>
              </block>
            </view>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
    <!--我的约茶-->
    <swiper-item>
      <view class='yueCha'>
        <view class="tab  {{classIndex==0?'Yueactive':''}}" data-index='{{0}}' catchtap='changeYue'>全部</view>
        <view class="tab  {{classIndex==1?'Yueactive':''}}" data-index='{{1}}' catchtap='changeYue'>进行中</view>
        <view class="tab  {{classIndex==2?'Yueactive':''}}" data-index='{{2}}' catchtap='changeYue'>待付款</view>
        <view class="tab  {{classIndex==3?'Yueactive':''}}" data-index='{{3}}' catchtap='changeYue'>待评价</view>
      </view>
      <block wx:for="{{myYue}}">
        <view class='people'>
          <image src='{{item.userHead}}' class='headimg'></image>
          <view class='vip'>V</view>
          <view class='per-info' style='width: 220rpx'>
            <view class='name'>{{item.name}}
              <text style='margin-left:15rpx; font-size:28rpx'>{{item.position}}</text>
            </view>
            <view class='company'>{{item.company}}</view>
            <view class='less'>{{item.less}}</view>
          </view>
          <view class="care">
            <block wx:if="{{item.care==0}}">
              <view class='' style='color:#333' catchtap='toEvaluate' >评价</view>
            </block>
            <block wx:if="{{item.care==1}}">
              <view class='' style='color:#333'>付款</view>
            </block>
          </view>
          <view class='detail' catchtap='tomyTea'>查看详情</view>
          <view class='status'>进行中</view>
        </view>
      </block>
    </swiper-item>
    <!--我的邀约-->
    <swiper-item>
      <block wx:for="{{myCare}}">
        <view class='people'>
          <image src='{{item.userHead}}' class='headimg'></image>
          <view class='vip'>V</view>
          <view class='per-info'>
            <view class='name myInvite'>{{item.name}}
              <text style='margin-left:15rpx; font-size:28rpx'>{{item.position}}</text>
              <text class='myStatus {{item.status == 1?"myNoStatus":""}}' >{{item.status == 1?"已过期":"已接收"}}</text>
              <!-- <text class='myNoStatus'></text> -->
            </view>
            <view class='company'>{{item.company}}</view>
            <view class='less'>{{item.less}}</view>
          </view>
          <view class='detail' catchtap='toMyInvite'>查看详情</view>
        </view>
      </block>
    </swiper-item>
  </swiper>
</view>



<!--tab切换  -->
<import src="/pages/template/template.wxml" />
<template is="enterprise-tab" data="{{userInfo}}" />


<!--取消关注-->
<view class='modal' wx:if="{{isShow}}">
  <view class='modalBox'></view>
  <view class='moadl_in'>
    <view class='x' catchtap='close'>×</view>
    <image src='../images/modal_bg.png'></image>
    <view class='modal_txt'>确定不再关注此人？</view>
    <view class='modal_bottom'>
      <view class='close' catchtap='close'>取消</view>
      <view class='right' catchtap='close'>确定</view>
    </view>
  </view>
</view>

<!-- 关注 -->
<view class='modal' wx:if="{{isFans}}">
  <view class='modalBox'></view>
  <view class='moadl_in'>
    <view class='x' catchtap='close'>×</view>
    <image src='../images/care_img.png'></image>
    <view class='modal_txt'>是否要关注此人？</view>
    <view class='modal_bottom'>
      <view class='close' catchtap='close'>取消</view>
      <view class='right' catchtap='close'>确定</view>
    </view>
  </view>
</view>

二、wxss样式页面代码如下：

/* pages/follow/follow.wxss */
@import "/pages/template/template.wxss";

.container {
}

.container .top {
  display: flex;
  justify-content: space-around;
  font-size: 32rpx;
  color: #2d2f33;
  border-bottom: 1px solid #eee;
  /* padding: 15rpx 0; */
  box-sizing: border-box;
}

.tab {
  padding: 15rpx 0;
  box-sizing: border-box;
}

.seiperTab {
  width: 100%;
  height: calc(100vh - 190rpx);
}

/*我的关注  */

.scroll {
  width: 100%;
  height: 100%;
}

swiper-item {
  padding: 0 23rpx;
  box-sizing: border-box;
}

.headimg {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 3rpx solid #d4a854;
}

.people {
  padding: 28rpx 10rpx 32rpx 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  position: relative;
}

.per-info {
  width: 362rpx;
}

.per-info .name {
  font-size: 36rpx;
  color: #2d2f33;
}

.per-info .company {
  font-size: 28rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 100%;
}

.per-info .less {
  font-size: 24rpx;
  color: #999;
}

.care {
  display: flex;
  padding: 18rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  color: #999;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10rpx;
}

.vip {
  position: absolute;
  left: 102rpx;
  top: 120rpx;
  width: 30rpx;
  height: 30rpx;
  background-color: #ffba00;
  border-radius: 50%;
  border: 1px solid #fff;
  color: #fff;
  line-height: 30rpx;
  text-align: center;
  font-size: 20rpx;
}

.active {
  border-bottom: 4rpx solid #409eff;
  color: #409eff;
  font-weight: bold;
}

/*取消关注modal */

.modal .modalBox {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
}

.modal .moadl_in {
  width: 582rpx;
  height: 412rpx;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -291rpx;
  margin-top: -206rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.modal .moadl_in .x {
  padding: 15rpx 15rpx 0 0;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  color: #878d99;
  font-size: 40rpx;
}

.modal .moadl_in image {
  width: 203rpx;
  height: 166rpx;
}

.modal_txt {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.modal .moadl_in .modal_bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 92rpx;
  font-size: 32rpx;
  line-height: 92rpx;
}

.close, .right {
  width: 50%;
  height: 100%;
}

.modal .moadl_in .modal_bottom .close {
  color: #999;
  border-right: 1px solid #eee;
}

.modal .moadl_in .modal_bottom .right {
  color: #409eff;
}

.careActive {
  border: 1px solid #409eff;
}

/*我的约茶  */

.yueCha {
  display: flex;
  justify-content: space-around;
  color: #333;
  font-size: 28rpx;
  margin: 10rpx 0;
}

.yueCha .tab {
  padding: 15rpx 30rpx;
  border-radius: 10rpx;
}

.Yueactive {
  color: #fff;
  background-color: #409eff;
}

.detail {
  font-size: 24rpx;
  color: #333;
  padding: 18rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
}

.status {
  position: absolute;
  padding: 5rpx;
  background-color: #67c23a;
  color: #fff;
  font-size: 20rpx;
  border-radius: 5rpx;
  right: 10rpx;
  top: 0;
}

.myInvite {
  display: flex;
  align-items: center;
}

.myStatus {
  padding: 3rpx;
  color: #fff;
  background-color: #67c23a;
  font-size: 20rpx;
  border-radius: 5rpx;
  margin-left: 15rpx;
}

.myNoStatus {
  padding: 3rpx;
  color: #fff;
  background-color: #999;
  font-size: 20rpx;
  border-radius: 5rpx;
  margin-left: 15rpx;
}

三、js文件代码如下：

// pages/follow/follow.js
import { toTabPage } from "../../utils/common.js"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myCare: [
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 0
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1
      },
    ],
    myFans: [
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 0
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1
      },
    ],
    myYue: [
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 0,
        status: 0
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1,
        status: 0,
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1,
        status: 0
      },
    ],
    myCare: [
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 0,
        status: 0,
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1,
        status: 1,
      },
      {
        userHead: '../images/read100.png',
        name: '李狗蛋',
        position: '总经理',
        company: '金沙江创投有限公司上海..',
        less: '移动互联网 教育',
        care: 1,
        status: 0,
      },
    ],
    deskIndex: 0,
    currentIndex: 0,
    isShow: false,
    isFans: false,
    classIndex: 0
  },

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

  },

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

  },

  //切换关注
  changeTab: function (event) {
    let that = this;
    let { index } = event.currentTarget.dataset;
    that.setData({ deskIndex: index, currentIndex: index });
    console.log(index);
  },

  //swiper切换
  bindchange: function (event) {
    let that = this;
    let current = event.detail.current;
    that.setData({ deskIndex: current });
    console.log(current);
  },

  //取消关注
  care: function () {
    let that = this;
    that.setData({ isShow: true });
  },

  //关闭modal
  close: function () {
    let that = this;
    that.setData({ isShow: false, isFans: false });
  },

  //关注
  fans: function () {
    let that = this;
    that.setData({ isFans: true });
  },

  changeYue: function (event) {
    let that = this;
    let { index } = event.currentTarget.dataset;
    that.setData({ classIndex: index });
  },

  //我的约茶查看详情
  tomyTea: function () {
    let that = this;
    wx.navigateTo({
      url: `/pages/A-follow/myTea/myTea`,
    })
  },

  //我的邀约查看详情
  toMyInvite: function () {
    let that = this;
    wx.navigateTo({
      url: `/pages/A-follow/myInvite/myInvite`,
    })
  },

  //评价
  toEvaluate: function () {
    let that = this;
    wx.navigateTo({
      url: `/pages/A-follow/evaluate/evaluate`,
    })
  },

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

  },

  // tab切换
  toTabPage: function (e) {
    toTabPage(e)
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

模板简介：该模板名称为【微信小程序顶部滑动导航栏tab栏选项卡切换之四栏切换滑动制作】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。