小程序封装下拉框组件，带搜索

最新推荐文章于 2024-11-18 12:02:35 发布

原创

最新推荐文章于 2024-11-18 12:02:35 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript #css3

本文介绍如何在小程序中封装一个下拉框组件，该组件包含搜索功能。首先展示了select.wxml、select.js和select.css的代码实现，接着说明了如何在其他页面引用这个封装好的组件，包括在json文件中的引入方式、wxml的使用以及在js中定义selectArray参数的值，可以是通过接口请求或者设置默认值。

1.组件
在这里插入图片描述
select.wxml

<!--Componet/select/select.wxml-->
<view class='com-selectBox'>
    <view class='com-sContent' bindtap='selectToggle'>
      <input value="{
  
  {nowText==''?propArray[0].text : nowText}}" placeholder="请选择" bindinput="vagueFun"></input>
        <view class='com-sTxt'></view>
        <image src='../../images/tip1.png'  class='com-sImg'  animation="{
  
  {animationData}}"></image>
    </view>
    <view class='com-sList' wx:if="{
  
  {selectShow}}">
        <view wx:for="{
  
  {selectData}}" data-index="{
  
  {item.id}}" wx:key='' class='com-sItem' bindtap='setText'>{
  
  {item.text}}</view>
    </view>
</view>

select.js

// Componet/select/select.js
Component({
  /**
   * 组件的属性列表
   */

最低0.47元/天解锁文章

小程序 封装下拉框组件，带搜索

4 条评论

小程序封装下拉框组件，带搜索