2024年最新一步步教你用taro封装一个公司库的下拉组件，大厂架构师经验分享

2301_82243626

于 2024-05-07 17:28:06 发布

阅读量288

点赞数 3

分类专栏：程序员文章标签： taro 经验分享

本文链接：https://blog.csdn.net/2301_82243626/article/details/138539207

版权

程序员专栏收录该内容

176 篇文章 0 订阅

订阅专栏

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

技术要深入到什么程度？
做久了技术总要转型管理？
我能做什么，我想做什么？
一技之长，就是深耕你的专业技能，你的专业技术。（重点）
独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）
拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

栈内技术 - 是指你的前端专业领域技术
栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识
工程经验 - 是建设专业技术体系的“解决方案”
带人做事 - 是对团队协作能力的要求
业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

pageIndex: 1

() => {

const { open } = this.state;

this.props.searchCompanyLibraryList &&

this.props.searchCompanyLibraryList(company, open);

}

);

}

};

//触底函数

onScrollToUpper = async () => {

console.log(“我在触底”);

const { pageIndex, pageSize, dataSource, applicantName } = this.state;

let applicantNameList = encodeURI(applicantName);

let params = {

keyWord: decodeURI(applicantNameList),

pageSize,

pageIndex: pageIndex + 1

};

const data = await searchCompanyLibrary(params);

console.log(dataSource, “dataSource”);

console.log(data.data.data, “data”);

this.setState({

// open: true,

// applicantName: applicantName,

dataSource: […dataSource, …data.data.data],

pageIndex: pageIndex + 1

});

};

render() {

const {

applicantName,

popLeft,

popWidth,

open,

popTop,

dataSource

} = this.state;

console.log(dataSource, “dataSource”);

const scrollStyle = {

zIndex: 100,

height: “250px”

};

const { placeholder = “请输入”, title = “”, clear = false } = this.props;

return (

<View

className=“position-relative fuzzy-query”

id=“fuzzy-query”

onRef={node => (this.fuzzyWrap = node)}

{title}

<View

className={

clear && applicantName

? “search-input-show-clear”

“search-input-wrap”

}

<Input

placeholderStyle=“color:#f8f8f8”

className=“search-input”

value={applicantName}

onChange={this.handleChange}

placeholder={placeholder}

{clear && applicantName && (

className="at-input__icon "

onClick={() =>

this.setState({

applicantName: “”,

dataSource: [],

open: false

})

}

<span className="taro-text at-icon

at-icon-close-circle at-input__icon-close">

)}

<View

style={{ top: ${popTop * 2}px }}

className={

open

? “show-fuzzy-pop position-absolute fuzzy-query-pop”

“position-absolute fuzzy-query-pop”

}

<ScrollView

scrollY

style={scrollStyle}

scrollWithAnimation

onScrollToLower={this.onScrollToUpper}

// 使用箭头函数的时候可以这样写 onScrollToUpper={this.onScrollToUpper}

<View

style={{

paddingLeft: ${popLeft - 12}px,

width: ${popWidth}px

}}

{dataSource.length > 0 &&

dataSource.map(item => {

return (

<AtListItem

title={item.name}

onClick={e => this.handleClick(e, item, “selectItem”)}

);

})}

);

}

export default FuzzyQuery;

样式部分

.fuzzy-query{

.at-list::after{border-top:0;}

.fuzzy-query-pop{

// border: 1px solid #e8e8e8;

box-sizing: border-box;

z-index:100;

width: 100%;

background: #fff;

// opacity: 0;

max-height:0;

overflow: hidden;

transition:max-height 0.5s ;

.at-list__item{

padding:20px;

font-size: 28px;

}

.at-list__item::after{left:0;}

}

.show-fuzzy-pop{

max-height:800px;

z-index: 100;

// overflow-y: scroll;

}

.input-wrap{

margin-left: 32px;

color:#333;

font-size: 28px;

.input-item{

position: relative;

padding:24px 0 ;

&::after{

content: ‘’;

position: absolute;

-webkit-transform-origin: center;

-ms-transform-origin: center;

transform-origin: center;

-webkit-box-sizing: border-box;

box-sizing: border-box;

pointer-events: none;

top: -50%;

left: -50%;

right: -50%;

bottom: -50%;

border: 0 solid #d6e4ef;

-webkit-transform: scale(0.5);

-ms-transform: scale(0.5);

transform: scale(0.5);

border-bottom-width: 1PX;

}}

.input_title{

width:172px;

margin-right: 16px;

}

.search-input-wrap{width:calc(100% - 172px);position: relative;

.fuzzy-clear{position: absolute;right:0;width:32px;height:32px}}

.search-input-show-clear{width:480.12px;position: relative;

.fuzzy-clear{position: absolute;right:0;width:32px;height:32px}}

input::-webkit-input-placeholder {

color: rgb(204,204,204);

}

input::-moz-placeholder {

/* Mozilla Firefox 19+ */

color: rgb(204,204,204);

}

input:-moz-placeholder {

/* Mozilla Firefox 4 to 18 */

color: rgb(204,204,204);

}

input:-ms-input-placeholder {

/* Internet Explorer 10-11 */

color: rgb(204,204,204);

}

实现思路介绍（接口调用在子组件执行还是父组件）

const { pageIndex, pageSize, dataSource, open } = this.state;

let params = { keyWord: decodeURI(value), pageSize, pageIndex };

const data = await searchCompanyLibrary(params);

总结1

子组件中进行接口的调用并进行页面的渲染

实现思路介绍（get请求传入中文页面获取不到参数）

let applicantNameList = encodeURI(applicantName);

let params = {

keyWord: decodeURI(applicantNameList),

pageSize,

pageIndex: pageIndex + 1

};

总结2

先用encodeURI编码再用decodeURI解码

实现思路介绍（如何改变下拉的分页）

//触底函数

onScrollToUpper = async () => {

console.log(“我在触底”);

const { pageIndex, pageSize, dataSource, applicantName } = this.state;

let applicantNameList = encodeURI(applicantName);

let params = {

keyWord: decodeURI(applicantNameList),

pageSize,

pageIndex: pageIndex + 1

};

const data = await searchCompanyLibrary(params);

console.log(dataSource, “dataSource”);

console.log(data.data.data, “data”);

this.setState({

// open: true,

// applicantName: applicantName,

dataSource: […dataSource, …data.data.data],

pageIndex: pageIndex + 1

});

};

总结3

ScrollView包裹设置出现滚动条的高度触底执行并对数据用扩展运算符拼接

实现思路介绍（如何控制下拉选择的值渲染到input上）

{dataSource.length > 0 &&

dataSource.map(item => {

return (

<AtListItem

title={item.name}

onClick={e => this.handleClick(e, item,

“selectItem”)}

);

})}

总结4

事件多绑定一个参数进行赋值点击触发完成赋值

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

css源码pdf