锐客网

  1. 首页 > 睿知 > it技术 > >

#yyds干货盘点# 一步步教你用taro封装一个公司库的下拉组件

IT知识公司封装

志不强者智不达，言不信者行不果。这篇文章主要讲述#yyds干货盘点# 一步步教你用taro封装一个公司库的下拉组件相关的知识，希望能为你提供帮助。


  前言



我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


前言


歌谣 歌谣 如何封装一个公司库的一个组件


需求介绍


首先要实现的是
1第一步 需要在一个input框中输入字符 当字符发生变化的时候进行接口的调用
2超过两个字符开始渲染页面
3将页面的值返回出去


核心代码部分【#yyds干货盘点# 一步步教你用taro封装一个公司库的下拉组件】

import Taro,Componentfrom "@tarojs/taro";
importView, Text, Input, Form, ScrollViewfrom "@tarojs/components";

importAtList, AtListItem, AtAccordionfrom "taro-ui";
importsearchCompanyLibraryfrom "@/services/user";
import "./index.scss";
/********
* @param placeholder String 默认请输入
* @param title String 输入框名字【required】
* @param clear Boolean 是否显示清楚按钮
* @param searchCompanyLibrary Function 获取列表数据 [required] 接口请求
*@param searchCompanyLibraryList 回调传值 第一个参数为外层需要的文本值
第二个参数为控制外面元素是不是存在的值
*@param companyName 用于编辑回显使用 外层传入
*@paramScrollView 滚动取值
* ****************** */
class FuzzyQuery extends Component
state =
applicantName: this.props.companyName || "",
popLeft: 0,
popWidth: 0,
open: false,
dataSource: [1, 2, 3],
popTop: 0,
selectItem: ,
isSelectCompany: false,
pageIndex: 1,
pageSize: 10
;
componentDidMount()
this.props.onRef & & this.props.onRef(this);
setTimeout(() =>
this.handleGetDom();
, 100);
// this.handleGetDom();

handleGetDom = () =>
let _this = this;
Taro.createSelectorQuery()
.select(".fuzzy-query .weui-input")
.boundingClientRect(function(rect)
// rect.id; // 节点的ID
// rect.dataset; // 节点的dataset
// rect.left; // 节点的左边界坐标
// rect.right; // 节点的右边界坐标
// rect.top; // 节点的上边界坐标
// rect.bottom; // 节点的下边界坐标
// rect.width; // 节点的宽度
// rect.height; // 节点的高度

_this.setState(
popLeft: rect.left,
popWidth: rect.width,
popTop: rect.height
);
)
.exec();
;
//选中某一项时触发
handleClick = (e, item) =>
console.log(e, "e");
e.stopPropagation();
e.preventDefault();

this.setState(

open: false,
applicantName: item.name,
selectItem: item
,
() =>
constopen= this.state;
this.props.searchCompanyLibraryList & &
this.props.searchCompanyLibraryList(item.name, open);

);
;
//当输入框发生变化时
handleChange = async keyWord =>
var company = keyWord.detail.value;
//先编码
var value = https://www.songbingjia.com/android/encodeURI(keyWord.detail.value);
console.log(value, "value");

//如果少于2个字符，是不调用接口的，此时不显示公司公司列表弹窗，且将数据清空
if (company.length < 2)
this.setState(

applicantName: company,
open: false,
dataSource: [],
pageIndex: 1
,
() =>
constopen= this.state;
this.props.searchCompanyLibraryList & &
this.props.searchCompanyLibraryList(company, open);

);
Taro.showToast(
title: "请输入不少于两个字符",
icon: "none",
mask: true
);
else
constpageIndex, pageSize, dataSource, open= this.state;
let params =keyWord: decodeURI(value), pageSize, pageIndex ;
const data = https://www.songbingjia.com/android/await searchCompanyLibrary(params);
this.setState(

open: true,
applicantName: company,
dataSource: data.data.data,
pageIndex: 1
,
() =>
constopen= this.state;
this.props.searchCompanyLibraryList & &
this.props.searchCompanyLibraryList(company, open);

);

;

//触底函数
onScrollToUpper = async () =>
console.log("我在触底");

constpageIndex, pageSize, dataSource, applicantName= this.state;
let applicantNameList = encodeURI(applicantName);
let params =
keyWord: decodeURI(applicantNameList),
pageSize,
pageIndex: pageIndex + 1
;
const data = https://www.songbingjia.com/android/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"
;
constplaceholder = "请输入", title = "", clear = false= this.props;
return (
< View
className="position-relative fuzzy-query"
id="fuzzy-query"
onRef=node => (this.fuzzyWrap = node)
>
< Form>
< View className=" input-wrap">
< View className=

    推荐阅读


    上一篇：如何使用物联网低代码平台进行工作表管理（）

    下一篇：OpenPlayers3 关于大数据矢量加载