【备战春招】第15天 商品列表页搜索组件开发

课程名称： CRMEB uniapp电商项目二次开发实战

课程章节： 5-1 商品列表页搜索组件开发
课程讲师： CRMEB

课程内容：
1、首先从iconfont网站上下载需要的字体包，然后复制到static目录下，
2、在App.vue中导入iconfont.css文件

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
@import '~@/static/iconfont.css';
</style>

3、需要的地方使用iconfont文件中的css样式

<template>
	<view class="search">
		<view class="search-container">
			<view class="search-input">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" v-module="keywords" placeholder="搜索商品名称">
			</view>
			<view class="show-model">
				<text class="iconfont icon-tupianpailie"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				keywords:''
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		position: fixed;
		left: 0;
		top:0;
		z-index: 9;
		width: 100%;
		height: 86rpx;
		&-container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 22rpx;
			border-color: #e93323;
			height: 100%;
			.search-input{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 640rpx;
				height: 60rpx;
				border-color: #fff;
				border-radius:50rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				.icon-sousuo{
					font-size: 34rpx;
					color: #555;
				}
				input{
					width: 548rpx;
					height: 100%;
					font-size: 26rpx;
				}
			}
			.show-model{
				width: 62rpx;
				height: 86rpx;
				color: #fff;
				line-height: 86rpx;
				.iconfont{
					font-size: 40rpx;
				}
			}
		}
	}
</style>

4、根据参数跳转到详情页面中

<template>
	<view class="category-area">
		<view class="category-area-container">
			<scroll-view class="first-category" :scroll-y="true">
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="item.id" :class="{on:index === curFirstCateIdx}" @click="onSwitchFirstCate(item,index)">
						{{item.cate_name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view class="second-category" :scroll-y="true" :scroll-into-view="`curView-${curSecondCateRowIdx}`" @scroll="onSecondCateViewScroll">
				<view class="first-list">
					<view class="first-item" v-for="(cate1,idx1) in list" :key="cate1.id" :id="`curView-${idx}`">
						<view class="first-category-name">
							{{cate1.cate_name}}
						</view>
						<view class="second-list">
							<navigator class="second-item" v-for="cate2 in cate1.children" :key="cate2.id" :url="`/pages/goods_list/goods_list?cid=${cate2.id}`">
								<image :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="cate2.pic" mode=""></image>
								<view class="second-category-name">
									{{cate2.cate_name}}
								</view>
							</navigator> 
						</view>
					</view>
					<view class="supplement" :style="{height:`${supplement}`}px">
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

课程收获：
这节课主要学习到了如何应用外部的iconfont的的引用并且如何使用的，首先从iconfont网站上下载需要的字体包，然后复制到static目录下，然后再App.vue或者main.js中导入下载的文件，然后在使用的地方使用，使用的方法形式是：，这样就可以直接展现了，鉴于字体包大小，可以引入网络格式，减少体积，再有就是学习到了通过navigator 的方式可以直接跳转到详情页面中，而且还有很多需要的参数，例如url、open-type（跳转方式）、hover-class（指定点击时的样式类，当hover-class="none"时，没有点击态效果）、target（在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram）等