微信小程序滑动导航栏、搜索、下拉选择界面
滑动屏幕可随着菜单栏切换内容，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请进入我的主页查看！