Barra de navegación deslizante del subprograma WeChat, búsqueda, interfaz de selección desplegable
Deslice la pantalla para cambiar el contenido con la barra de menú, la interfaz de demostración, si necesita más funciones, mejórela usted mismo según sus necesidades.
1. código 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. código 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. codigo 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. Código JSON
{
"usingComponents": {
},
"navigationBarTitleText":"导航+搜索",
"navigationBarBackgroundColor": "#44ADFB"
}
¡Para ver más demostraciones, vaya a mi página de inicio para ver!