首页(二):仿唯品会的搜索和导航栏功能(完美)"/>
动力商城首页(二):仿唯品会的搜索和导航栏功能(完美)
一、前言
上一节实现了自定义头部导航栏功能,可以兼容适配各种机型,想要学习的可以看上一篇文章。
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;}
此处省略样式部分代码块......可以看源码!
三、结果
四、源码
地址:动力商城微信小程序: 动力商城微信小程序:主要是提供给前端开发人员学习的电商项目,为了达到真实业务场景整体风格借鉴了“唯品会特卖”商城,小编会不断更新并丰富功能。如果有想要学习小程序的同学,可以加入进来一起开发。语言:微信小程序原生
更多推荐
动力商城首页(二):仿唯品会的搜索和导航栏功能(完美)
发布评论