一、前言
上一节实现了自定义头部导航栏功能，可以兼容适配各种机型，想要学习的可以看上一篇文章。
Nissi商城首页（一）：仿唯品会的自定义头部导航栏（完美）
https://blog.csdn.net/zhenghhgz/article/details/125691093
咱们继续实现商城首页功能，接着参考唯品会的搜索和导航栏功能，原始效果如下：
二、功能分析
1、搜索框：左侧是放大镜icon、右侧是相机icon，点击输入框可以跳转到 搜索历史页面。
2、导航栏：加载导航栏列表，点击不同的导航名称有放大效果，下方内容进行切换。
三、开发
1、代码目录结构
├─pages
│ └─index
│ index.js
│ index.json
│ index.wxml
│ index.wxss 2、代码片段
page/index/index.wxml 部分
<view class="head_input">
<image src="/images/search_icon.png" class="search_icon"></image>
<input type="text" placeholder="搜索" placeholder-class="place_holder" bindconfirm="getData"
value="{
{search}}"></input>
<image src="/images/camera_icon.png" class="camera_icon"></image>
</view>
<!--导航栏-->
<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true"
scroll-into-view="item{
{currentTab < 4 ? 0 : currentTab - 3}}">
<view class="navigate-item" id="item{
{index}}" wx:for="{
{tabList}}" wx:key="index" data-index="{
{index}}"
bindtap="tabNav">
<view class="names {
{currentTab === index ? 'active' : ''}}">{
{item.name}}</view>
<view class="currtline {
{currentTab === index ? 'active' : ''}}" wx:if="{
{currentTab === index}}"></view>
</view>
</scroll-view>
</view>page/index/index.js 部分
/**导航栏 */
isRefresh: false,
currentTab: 0,
tabList: [
{
name: '推荐'
},
{
name: '时尚'
}, {
name: '国际'
},
{
name: '美妆'
},
{
name: '母婴'
},
{
name: '居家'
},
{
name: '运动'
},
]
// 导航切换监听
tabNav(e) {
let currentTab = e.currentTarget.dataset.index;
this.setData({
currentTab,
tabName: this.data.tabList[currentTab].name
})
},
handleSwiper(e) {
let {current,source} = e.detail;
if (source === 'autoplay' || source === 'touch') {
const currentTab = current
this.setData({
currentTab,
tabName: this.data.tabList[currentTab].name
})
}
},page/index/index.wxss 部分
.head_input {
position: relative;
flex: 1;
margin: 12rpx 10rpx;
}
.search_icon {
position: absolute;
top: 50%;
left: 0;
margin-top: -15rpx;
width: 30rpx;
height: 31rpx;
padding-left: 26rpx;
}
.camera_icon {
position: absolute;
top: 50%;
right: 23rpx;
margin-top: -15rpx;
width: 36rpx;
height: 33rpx;
/* padding-right: 23rpx; */
}
.head_input input {
height: 68rpx;
padding-left: 75rpx;
font-size: 28rpx;
border-radius: 40rpx;
background: #F5F5F5;
}
.place_holder {
font-size: 30rpx;
color: #999999;
}
.sha_icon{
margin-left: 18rpx;
font-size: 28rpx;
color: #333333;
}
/*******导航栏********/
.scroll-wrapper {
white-space: nowrap;
-webkit-overflow-scrolling: touch;
background: #F13B7F;
height: 68rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
/* 去掉滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.navigate-item {
display: inline-block;
text-align: center;
height: 65rpx;
line-height: 65rpx;
margin: 0 30rpx;
}
.names {
font-size: 28rpx;
color: white;
}
.names.active {
color: white;
font-weight: bold;
font-size: 38rpx;
}
.currtline {
margin: -6rpx auto 0 auto;
width: 65rpx;
height: 6rpx;
border-radius: 4rpx;
}
.currtline.active {
background: white;
transition: all .3s;
}
.tab_title{
margin: 20rpx;
border: 1px solid #db7c22;
padding: 20rpx;
box-sizing: border-box;
}
.head {
background: #F13B7F;
}此处省略样式部分代码块......可以看源码！
三、结果
