动力商城首页（二）：仿唯品会的搜索和导航栏功能（完美）

编程入门行业动态更新时间:2024-10-27 02:22:12

动力商城<a href=https://www.elefans.com/category/jswz/34/1769812.html style= 首页（二）：仿唯品会的搜索和导航栏功能（完美）"/>

动力商城首页（二）：仿唯品会的搜索和导航栏功能（完美）

一、前言

上一节实现了自定义头部导航栏功能，可以兼容适配各种机型，想要学习的可以看上一篇文章。

Nissi商城首页（一）：仿唯品会的自定义头部导航栏（完美）

咱们继续实现商城首页功能，接着参考唯品会的搜索和导航栏功能，原始效果如下：

预览

二、功能分析

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 = currentthis.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;}

此处省略样式部分代码块......可以看源码！