课程名称: 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)等