WeChat applet sliding navigation bar, search, drop-down selection interface
Swipe the screen to switch content with the menu bar, demo interface, if you need more functions, please improve it yourself according to your needs.
1. js code:
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 code
<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 code
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 code
{
"usingComponents": {
},
"navigationBarTitleText":"导航+搜索",
"navigationBarBackgroundColor": "#44ADFB"
}
For more demos, please go to my homepage to view!