微信小程序滑动导航栏+搜索界面

微信小程序滑动导航栏、搜索、下拉选择界面

滑动屏幕可随着菜单栏切换内容，demo界面，如需更多功能，请根据需求自行完善。

1、js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    viewHeight: 640, // 屏幕高度
    index:0,
    array: ['男性', '女性', '未知'],
    tabList: ['测试一','测试二','测试三','测试四','测试五'],
    current: 0
  },
  // tab栏监听
  tabClick(e) {
    var obj = e.currentTarget.dataset;
    this.setData({
      current: obj.index,
      applyState: obj.tag
    })
  },
  // seiper滑动监听
  swiperClick: function (e) {
    this.setData({
      current: e.detail.current
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 获取手机屏幕高度
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          viewHeight: res.windowHeight
        });
      }
    });
  },
})

2、wxml代码

<view class="bg-color"></view>
<view class="big-box" style="height: {{viewHeight*0.99}}px;">
    <!-- 顶部固定部分 -->
    <view class="tab-fixed">
        <view class="level">
            <picker class="level left-data" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
                <text>{{array[index]}}</text>
                <text class="angle">▲</text>
            </picker>
            <view class="level right-data">
                <icon type="search" size="12" color="gray"></icon>
                <input class="search-input" placeholder="请输入关键字" />
                <text class="search-text">搜索</text>
            </view>
        </view>
        <view class="level tab-list">
            <block wx:for="{{tabList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
                <view class="tab-col" bindtap="tabClick" data-index="{{index}}">
                    <view class="tab-title {{current==index?'active-yes':''}}">
                        <text>{{item}}</text>
                    </view>
                </view>
            </block>
        </view>
    </view>
    <!-- 数据列表部分 -->
    <view class="list-data">
        <swiper current="{{current}}" circular="true" bindchange="swiperClick" style="height:{{viewHeight*0.84}}px">
            <block wx:for="{{5}}" wx:for-index="bigIndex" wx:for-item="bigItem" wx:key="bigItem">
                <swiper-item>
                    <scroll-view scroll-y="true" style="height: {{viewHeight*0.84}}px;">
                        <view class="not-data">分享微信小程序demo，进我主页，查看更多哟！</view>
                    </scroll-view>
                </swiper-item>
            </block>
        </swiper>
    </view>
</view>

3、wcss代码

page {
    background-color: #f1f1f1;
}

.bg-color {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    height: 200rpx;
    background-color: #44ADFB;
    border-bottom-left-radius: 100rpx;
    border-bottom-right-radius: 100rpx;
}

.big-box {
    position: relative;
    z-index: 1;
    background-color: white;
    margin: 0 20rpx;
    border-bottom-left-radius: 15rpx;
    border-radius: 15rpx;
}

.level {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 30rpx;
}

.tab-fixed {
    position: fixed;
    top: 0;
    left: 20rpx;
    right: 20rpx;
    z-index: 5;
    background-color: white;
    border-top-left-radius: 15rpx;
    border-top-right-radius: 15rpx;
}

.angle {
    padding-left: 5rpx;
}

.left-data {
    width: 20%;
    justify-content: center;
    background-color: #e8e8e8;
    margin: 10rpx 10rpx 10rpx 15rpx;
    padding: 10rpx;
    border-radius: 5rpx;
    color: rgb(92, 91, 91);
}

.right-data {
    width: 80%;
    padding: 10rpx 5rpx 10rpx 15rpx;
    background-color: #e8e8e8;
    margin: 10rpx 15rpx 10rpx 0;
    border-radius: 50rpx;
}

.search-input {
    width: 78%;
    padding-left: 10rpx;
}

.search-text {
    width: 22%;
    text-align: center;
    border-left: 1rpx solid white;
    color: #44ADFB;
}

.tab-list {
    justify-content: space-around;
    margin: 0 5rpx;
    padding-top: 12rpx;
    border-bottom: 5rpx solid #f1f1f1;
}

.tab-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-title {
    font-size: 30rpx;
    padding-bottom: 12rpx;
    border-bottom: 5rpx solid transparent;
    color: #606266;
}

.active-yes {
    color: #44ADFB;
    border-bottom: 5rpx solid #44ADFB;
}

.list-data {
    padding-top: 170rpx;
}

.not-data {
    font-size: 30rpx;
    padding: 20%;
    text-align: center;
    color: gray;
}

4、json代码

{
  "usingComponents": {},
  "navigationBarTitleText":"导航+搜索",
  "navigationBarBackgroundColor": "#44ADFB"
}

更多demo请进入我的主页查看！